Question

我一直在尝试更新我的网站，并且在将图像实施到网站背景中时遇到了极大的困难。

我尝试创建两个div，每一个一个（因为我希望输出为image1 - 让我们调用它leftbg.png然后在中间调用内容，然后是image2 - 让我们在右边调用rightbg.png）

所以我把div放在了身体里面：

<body>
    <div id="leftbg">
        <div id="rightbg">
             content
        </div>
    </div>
</body>

在css文件中我有：

#leftbg {
float: left;
width: 22.5% (body is 55%);
background: url(images/leftbg.png) no-repeat;
z-index: 999
}

然而，这并没有产生任何结果。我想这可能是因为我的身体代码已经包含了一个背景，并且我试图放置z-index，这样我的leftbg类将占据body体系，但是我知道z-index有很多问题。

这是正文css代码：

body {
font:11px "Trebuchet MS", Arial, sans-serif;
color:#666;
background:maroon url(image/backgrd.png);
z-index: 0;
}

任何帮助将不胜感激！

Answer 1

尝试将height设置为#leftbg。例如：

#leftbg {
float: left;
height: 80px;
width: 22.5%;
background: url(images/leftbg.png) no-repeat;
z-index: 999
}

Answer 2

我建议像这样重构HTML：

<div class="bgs">
    <div class="bg left"></div>
    <div class="bg right"></div>
</div>

<div class="fake-body">
    <h1>Hello World!!!!!!!!!!!!!</h1>
</div>

然后你可以用你的CSS做这样的事情：

.bgs{
    position: absolute;
    top: 0;
    left: 0;  
    width: 100%;
    height: 100%;
    background-color: green;
}

.bg{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.bg.left{
    left: 0;
    background-color: red;
}

.bg.right{
    right: 0;
    background-color: blue;
}

.fake-body{
    position: absolute;
    top: 0;
    left: 0;
}

我觉得这很干净。您可以随意使用所需的背景图像替换红色和蓝色背景颜色。

JSFiddle

无法插入背景图片

2 个答案: