demo

您可以使用background: background1, background2, ...;属性在彼此的顶部显示2个背景。在这里，我使用2个PNG作为背景。它们看起来很奇怪，因为我使用了100％100％的尺寸

<强> CSS

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 700px;
    background: url('http://fc08.deviantart.net/fs71/i/2013/082/a/c/png_grass_by_moonglowlilly-d5z1o5t.png') left top/100% 100% no-repeat,
        url('http://th05.deviantart.net/fs70/PRE/f/2013/120/7/b/png_monsters_inc_by_upinflames12-d63nx7i.png') left top/100% 100% no-repeat;
}

Answer 2

尝试创建多个部门，一个在position absolute或fixed，width:100% height:100%之上，另一个部门有自己的background，你需要制作html and body 100%：

CSS：

html, body{
   height:100%
}

#div1{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-1;
 background:(your background properties)
}

#div2{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-2;
 background:(your background properties)
}

#div3{
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:-3;
 background:(your background properties)
}

HTML：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

为了使它们彼此叠加，它们将需要是透明的png或具有不透明性。您还可以向正文添加背景以添加其他图层

Answer 3

为了实现这一点，我到目前为止所做的事情和我所知道的是，目前还没有办法添加两个background。所以，我制作了两个div说标题和页脚，然后我将背景应用于它。可能还有第三个div形成一个身体。将CSS position设置为absolute可以轻松实现重叠外观。

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

对于CSS，你可以拥有它。

#header, #body, #footer
{
    background: url("img1.jpg");
    position: absolute;
}

大多数网站都是这样做的。

试试这个。这可能适合你。

<style>
body
{
    margin: 0px;
}
div
{
    height: 33.3%;
}
#header
{
        background: url("1.jpg");
}
#footer
{
    background: url("2.jpg");
}
#body
{
        background: url("3.jpg");
}
</style>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

CSS3 - 覆盖整个网站的多个背景

3 个答案:

demo