标签：top log 忘记 区别 start 知识点 20px 图像 repeat
印象中css控制背景的就一个background，但是background是一个复合属性
它包括：
除了这些，多背景、渐变、遮罩，我也把他们归到背景里吧。
一个个看看吧-0-。
开头说了，我很长时间都以为背景就是background这一个单词的玩意。因为我总是写成：
1 .div{ 2 background: #000 url("1.jpg") no-repeat left center;/*颜色、图片、是否平铺、定位*/ 3 }
1 .div{ 2 width: 400px; 3 height: 200px; 4 5 padding: 20px; 6 border:10px solid rgba(255,255,255,.2); 7 8 background: #000 url("1.jpg") no-repeat; 9 background-origin:border-box; 10 /*background-origin:padding-box;*/ 11 /*background-origin:content-box;*/ 12 }
以上就是background-origin的效果，但是貌似好像跟我想要的有那么点区别，底边跟右侧在padding、content的时候还是有背景图，而且啊好像对背景颜色（#000）没起作用
1 .div{ 2 width: 400px; 3 height: 200px; 4 5 padding: 20px; 6 border:10px solid rgba(0,0,0,.1); 7 8 background:#000 url("1.jpg") no-repeat; 9 /*background-clip:border-box;*/ 10 /*background-clip:padding-box;*/ 11 background-clip:content-box; 12 }
以上就是background-clip的效果，感觉比background-origin好那么点，哈。
以前在一个容器（div）里，实现多层背景，只能在容器里多写几个子元素，然后在把子元素定位。简单点让设计给出账图，直接糊上去完事（我经常干的事，哈哈）。
现在实现上边的效果，只要一个div就可以了。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div{ 8 width: 240px; 9 height: 150px; 10 border:1px solid #000; 11 12 background: url("1.jpg") no-repeat left top, 13 url("2.jpg") no-repeat left bottom, 14 url("3.jpg") no-repeat right bottom; 15 background-size:100px auto, 100px auto, 100px auto; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="div"></div> 21 </body> 22 </html>
说实话，看完这些知识点，真的不想再重新写一遍。感觉忘记在查手册、百度、谷歌一下就好了。
不过心里边总是还有点纠结吧。
在坚持坚持吧！！！还有渐变没有写
标签：top log 忘记 区别 start 知识点 20px 图像 repeat
原文地址：http://www.cnblogs.com/wmh1106/p/6056574.html
