标签：
注意点： background：blue；
与
background-color：blue；
不一样！
一、关于background设置：
1）background：blue；
2）background-image：url(图片名称)；
当背景既有颜色，又有图片时，哪个在后面哪个就生效，如下例所示；
此处写了“新宋体”的这张图片作为本文涉及到的背景图片。
以图片为背景时，若图片小于页面大小，则图片会一直重复直到铺满为止；
字在后面时，字生效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS设置背景图片</title> 6 </head> 7 <style type="text/css"> 8 #picture 9 { 10 width:600px; 11 height :400px; 12 background: blue; 13 background-image: url(ziti.png); 14 } 15 </style> 16 <body> 17 <div id="picture"> 18 19 </div> 20 </body> 21 </html>
颜色在后面时，颜色生效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS设置背景图片</title> 6 </head> 7 <style type="text/css"> 8 #picture 9 { 10 width:600px; 11 height :400px; 12 background-image: url(ziti.png); 13 background: blue; 14 } 15 </style> 16 <body> 17 <div id="picture"> 18 19 </div> 20 </body> 21 </html>
二、当使用以下两种时：
1）background-color：red；
2）background-image：url(图片名称)；
当背景颜色既设置颜色，又设置图片时，图片优先显示。(有些网站不仅设置图片背景，还同时设置背景色~好处，额，我在知乎看到好多~大概是说让用户体验更优，减少错误率)
如下例所示：
虽然background-color写在后面，但图片优先显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS设置背景图片</title> 6 </head> 7 <style type="text/css"> 8 #picture 9 { 10 width:600px; 11 height :400px; 12 background-image: url(ziti.png); 13 background-repeat: no-repeat; 14 background-position: center; 15 background-color: red; 16 } 17 </style> 18 <body> 19 <div id="picture"> 20 21 </div> 22 </body> 23 </html>
三、想要解除重复属性，或者控制其在x或者y方向上重复时，可在<style></style>中用 background-repeat：no-repeat；不重复
repeat-x; 在水平方向铺满
repeat-y; 在竖直方向铺满
效果如下：
四、一般情况下，背景图片默认从左上角开始铺，使用background-position 属性可定义其位置，如：右边，中间等。
另外，还可以使用background-position 属性对图片位置进行精确的控制，详见下一篇学习笔记 ：）
五、background-attachment：fixed； 在页面很大时，可使该图片不随着滚动条的移动而消失在视野中，它会一直显示在页面已经定义好的地方。
标签：
原文地址：http://www.cnblogs.com/Christeen/p/5668818.html
