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{
width: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{ width: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{
width: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{ width:580px; height:443px; background:url(images/3.jpg) no-repeat #5fb878 center; padding:20px; } </style> </head> <body> <div class="wrap"></div> </body>