首页猿问将背景应用于<html>...

将背景应用于<html>和/或<body>

Html/CSS

缥缈止盈 2019-07-06 16:40:40

将背景应用于<html>和/或<body>http://jsfiddle.net/julien_c/GmAL4/我发现如果你把CSS背景应用到body，它占用整个页面(不管实际高度或宽度是多少)。body)。但是，如果将css背景应用于两者html和body的背景body 不会占用整页.这是预期的差异行为吗？我该如何叠加两个全屏背景(例如，背景颜色和半透明图像？)

查看完整描述

2 回答

隔江千里

TA贡献1906条经验获得超10个赞

这是正确行为.¹ 标准模式, body, 以及html，不会立即占据整个视口的高度，即使只对后者应用背景时也是如此。事实上，html元素将以body如果你不给它自己的背景，而且html将此传递到画布上：

根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是单独为该元素绘制的一样。(换句话说，背景定位区域是为根元素确定的。)如果根的“背景颜色”值是“透明的”，则画布的背景色依赖于UA。根元素不会再次绘制此背景，即其背景的使用值是透明的。
对于根元素为HTML的文档HTML元素或XHTMLhtml元素：如果根元素上的“背景-图像”的计算值为“无”，且其“背景色”为“透明”，则用户代理必须从该元素的第一个HTML中传播背景属性的计算值。BODY或XHTMLbody子元素的使用值BODY元素的背景属性是它们的初始值，传播的值被视为是在根元素上指定的。建议HTML文档的作者为BODY元素而不是HTML元素。

但是，您可以将任何背景图像叠加在单个元素上(其中之一)。html或body)，而不必依赖两个元素-只需使用background-color和background-image或者将它们合并到background速记财产：

body {
    background: #ddd url(background.png) center top no-repeat;}

如果你想把两幅背景图像，你需要依赖多种背景。这主要有两天的时间：

在CSS 2中，这两个元素的样式都很有用：只需将背景图像设置为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%从viewport中取出，然后应用于body作为允许滚动内容的最低限度。
在CSS 3中，语法已经扩展，所以您可以在单个属性中声明多个背景值，消除了将背景应用于多个元素(或调整)的需要。height/min-height):
```
body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;}
```
唯一的警告是，在一个单一的多层背景，只有最底层可能有一个背景颜色。在这个例子中，您可以看到transparent值从上层丢失。
不要担心-即使您使用多层背景，上面与传播背景值一起指定的行为也完全一样。

但是，如果您需要支持较旧的浏览器，则需要使用CSS 2方法，该方法一直支持到IE7。

我的评论另一个答案解释，伴随着小提琴，如何body实际上抵消了html在默认情况下，尽管它看起来像正在被填补，但同样由于这一看似奇怪的现象。

¹ _{这可能在设置HTML中有其根源。background和bgcolor属性body导致背景属性应用于整个视图端口。更多关于这一点这里.}

反对回复 2019-07-06

2 回答
0 关注
365 浏览

关注

将背景应用于<html>和/或<body>

将背景应用于<html>和/或<body>

2 回答

相关问题推荐

添加回答

热搜

最近搜索清空

将背景应用于<html>和/或<body>

将背景应用于<html>和/或<body>

2 回答

相关问题推荐

添加回答