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

Question

我想知道如何将多个背景设置在一个覆盖整个站点的另一个之下。我的意思是这样的：http ://us.battle.net/d3/en/reaper-of-souls/

我 simplay 还找不到解决方案，但实际上看起来很简单 :(

Answer 1

演示

您可以使用该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

为了实现这一点，我到目前为止所做的以及我所知道的是，到目前为止还没有办法添加两个backgrounds。所以，我做了两个div说header和footer，然后我在它上面应用背景。可能还有三分之一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>

Answer 3

尝试创建几个部门，一个在另一个之上，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 或具有不透明度。您还可以为主体添加背景以添加另一层