1,backgruond-color与background
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片背景研究</title> <style> .wrap{ width:1000px; height:463px; background-color:#5fb878; background:url(images/3.jpg) no-repeat; } </style> </head> <body> <div class="wrap"></div> </body> </html>
div的背景图片大小是580*463px,现在设置div宽度的小是1000px,我预想的情况是，div剩余宽度会由
background-color填满，预期效果如下：
实际效果如下：
也就是说
background-color设置的背景色被放在下面优先级高的background给层叠掉了，只要你把background-color样式设置在background的后面，就会出现预期效果。
.wrap{
1000px;
height:463px;
background:url(images/3.jpg) no-repeat;
background-color:#5fb878;
}
为什么呢？
那你得先认识一下background到底是何方圣神呢？
background的作用就是简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
所有背景属性在一个声明之中：
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
二， 接下来再总结一下background背景图片与padding之间的关系：
当div的大小与图片大小一致的时候：设置div--padding 10px;
.wrap{ 580px; height:463px; background:url(images/3.jpg) no-repeat #5fb878 center; padding:10px; } </style> </head> <body> <div class="wrap"></div>
效果如图：
2，当div高度小于背景图的高度时，如果有padding,背景图会自动填充padding
.wrap{
580px;
height:443px;
background:url(images/3.jpg) no-repeat #5fb878 center;
padding:5px;
}
如果:padding值是20px,此时div的height--443px+padding的高度20*2=483px大于背景图的高度,那么此时背景图的高度依然是463px,并且还有剩余的padding--10px.
.wrap{ 580px; height:443px; background:url(images/3.jpg) no-repeat #5fb878 center; padding:20px; } </style> </head> <body> <div class="wrap"></div> </body>
