Chapter 8 背景图片

缩放背景图片

background-size: 100px 100px; /* 设置图片的尺寸*/
background-size: 100% auto; /* 浏览器会自动设置宽度，以保持不变的长宽比*/
background-size: 100% 100%; /* 图片将缩放，完全适应背景*/
background-size: contain; /* 迫使图片进行尺寸调整，以保持图片等长宽比， 图片会伸展， 以适应元素的高度或者宽度*/
background-size: cover; /* 为了适应元素， 图片会进行挤压或者拉伸*/

使用多个背景图片

卷轴效果

background-image:  url(scrollTop.jpg),
                   url(scrollBottom.jpg),
                   url(scrollMiddle.jpg);
background-repeat: no-repeat,
                   no-repeat,
                   repeat-y;

background:  url(scrollTop.jpg) center top no-repeat,
             url(scrollBottom.jpg) center bottom no-repeat,
             url(scrollMiddle.jpg) center top repeat-y;

免费的图片

• 照片
  https://morguefile.com/
  www.sxc.hu
  http://openphoto.net
  http://searchcreativecommons.org
  *www.flickr.com/creativecommons
  http://picasaweb.google.com

• 图标
  *www.somerandomdude.com/work/sanscons

• 平铺图案
  *www.colourlovers.com/patterns
  http://www.kollermedia.at/2004/09/17/pattern4u/
  http://squidfingers.com/patterns

• 制作平铺背景
  http://bgpatterns.com
  www.stripegenerator.com
  www.patterncooler.com