缩放背景图片
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.colourlovers.com/patterns
http://www.kollermedia.at/2004/09/17/pattern4u/
http://squidfingers.com/patterns制作平铺背景
http://bgpatterns.com
www.stripegenerator.com
www.patterncooler.com