Question

如果我尝试将<html>的背景图片设置为居中和顶部，并且<body>设置为居中和底部，则它不起作用且仅显示<html>背景。

这是否适用于所有浏览器？

Answer 1

您可以使用CSS3使用多个背景来实现此目的。类似的东西：

body {
  background-image: url(bg1.png), url(bg2.png);
  background-position: center top, center bottom;
}

如果没有，确保您的body和html高度为100％，或者至少有min-height为100％。

Answer 2

<html>标记是文档根目录，并非真正意图可见或已应用CSS属性。 CSS规范2.1确实将<html>定义为具有盒子模型，但我仍然不会依赖它。

你可以set multiple backgrounds with CSS3，或者像这样创建一个额外的（绝对的或固定的）<div>：

<强> HTML

<body>
    <div id="container">
         <!-- your usual content -->
    </div>
    <div id="bg"></div>
</body>

<强> CSS

body { background-image: url(...); }

#bg {
    background-image: url(...);
    float: left; /* body overflow fix */
    left: 0;
    position: absolute;
    top: 0;
    height: 100px; /* height of your background */
    width: 100%;
    z-index: -1000;
}

Answer 3

为两者使用不同的图像并添加height:100%

html{
    background:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNxe5UjGfVsd1EpdEtrrlGDhjEO2VMFoIY9SGRCuBd4qAr9XhcCQ) top center no-repeat;
    height:100%
}
body{
    background:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqQ6g5bisPWccunUGGItC09wa1kgcc5X-rEEGGdEoWEwqUCnuZ) bottom center no-repeat;
        height:100%
}

<强> DEMO

是否有任何浏览器同时支持不同的背景图像？

3 个答案: