0

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

每个浏览器都这样吗？

4

3 回答 3

1

您可以使用 CSS3 使用多个背景来实现此目的。就像是：

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

如果不是，请确保您的body和html是 100% 的高度，或者至少有 100% 的高度min-height。

于 2013-04-10T09:28:39.223 回答
0

该<html>标签是文档根目录，并不是真正的可见或应用了 CSS 属性。CSS 规范 2.1 确实定义了<html>一个盒子模型，但我仍然不会依赖它。

您可以使用 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;
}
于 2013-04-10T09:24:02.883 回答
0

为两者使用不同的图像并添加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%
}

演示

于 2013-04-10T09:25:44.037 回答