http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为？
如何叠加两个全屏背景(例如,背景颜色和半透明图像？)
Bol*_*ock 57
这是正确的行为.1 在标准模式下,body,以及html,不立即采取了视区的整个高度,即使它出现,所以当你只应用背景后者.事实上,如果你没有给它自己的背景,那么html元素将采用body背景,并将它html传递给画布:
根元素的背景成为画布的背景,其背景绘画区域延伸到覆盖整个画布,尽管任何图像的大小和位置都相对于根元素,就像它们仅为该元素绘制一样.(换句话说,背景定位区域是根元素确定的.)如果根的"背景颜色"值是"透明",则画布的背景颜色取决于UA.根元素不会再次绘制此背景,即其背景的使用值是透明的.
对于其根元素是HTML
HTML元素或XHTMLhtml元素的文档:如果根元素上的"background-image"的计算值为"none"且其"background-color"为"transparent",则用户代理必须传播从该元素的第一个HTMLBODY或XHTMLbody子元素计算背景属性的值.该BODY元素的背景属性的已使用值是它们的初始值,并且传播的值被视为在根元素上指定它们.建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素.
但是,尽管如此,您可以叠加在背景颜色的任何背景图像中的一个元素(无论是在html或body),而不必依赖于两个元素-简单地使用background-color和background-image或将它们组合background速记属性:
body {
background: #ddd url(background.png) center top no-repeat;
}
如果要组合两个背景图像,则需要依赖多个背景.这主要有两天时间:
在CSS2中,这两个元素的样式都派上用场:只需将背景图像设置为html另一个图像,然后将另一个图像body叠加到第一个图像上.要确保body在全视口高度的显示器上显示背景图像,您还需要分别应用height和min-height:
html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
顺便说一句,你为什么要注明原因height,并min-height以html和body分别为,因为无论元素有什么内在的高度.两者都是height: auto默认的.视口具有100%的高度,因此height: 100%从视口中获取,然后应用于body最小值以允许滚动内容.
在CSS3中,语法已经扩展,因此您可以在单个属性中声明多个背景值,从而无需将背景应用于多个元素(或调整height/ min-height):
body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
唯一需要注意的是,在单个多层背景中,只有最底层可能具有背景颜色.您可以在此示例中看到transparent上层缺少值.
不用担心 - 即使您使用多层背景,上面指定的传播背景值的行为也完全相同.
但是,如果您需要支持旧版浏览器,则需要使用CSS2方法,该方法一直支持IE7.
我在评论这对方的回答解释,与随行小提琴,如何body实际上是从偏移html通过,即使它看起来像是被填补了,而不是再次因为这个看似奇怪的现象默认边距.
1 这可能有它的根在设置HTML background和bgcolor属性body造成的背景属性适用于整个视口.更多关于这一点.
建议阅读这篇：
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
本质上，如果元素background上没有 a html，body background将覆盖页面。如果元素background上有 a html，则其body background行为与任何其他元素一样。
| 归档时间： |
|
| 查看次数： |
27080 次 |
| 最近记录： |