1

所以我有 2 个背景，我需要将它们“粘贴”到居中 div 的两侧。无论浏览器设置的宽度如何，div 本身都应以页面为中心。

我现在遇到的问题是......背景，由于 % 在调整浏览器的宽度时在居中的容器 div 下方移动。他们保持在我给他们的百分比，但如果我不给他们百分比和绝对位置......背景不会粘在div的一边。

我想要完成的是让此快照中的叶子背景根据浏览器的宽度进行相应调整：http: //grab.by/odcy 在此屏幕截图中，我将宽度调整得更小，div 会发生变化，但背景会发生变化仍然留在我给他们的%'s。你会得到我不想要的这种重叠效果。

/ ** 编辑 ** /

居中的 div 下面不应该有任何背景，请注意底部是灰色的。

我想确保第一片叶子的最右边和第二片叶子的最左边总是与居中的 div 齐平，并且不会因为重新调整而被切断。就像在这个屏幕截图中...... http://grab.by/odlC

/ **结束编辑** /

这是我的html简化：

<div id="bg1"></div>
<div class="container"></div>   
<div id="bg2"></div>

这是我的 CSS 简化：

#bg1 {
    float:right;
    position:absolute;
    background:gray;
    height: 100%;
    width: 100%;
    right: 77%;
    top: 100px;
    margin-right:2px;
}
#bg2 {
    float:left;
    position:absolute;
    background:#ccc;
    height: 100%;
    width: 100%;
    left: 25%;
    top: 100px;
    margin-left: 325px;
    overflow-x:hidden;
}

.container {
    margin:0 auto;
    width:260px;
    height:500px; /*for demo only */
}

我也创建了一个小提琴：http: //jsfiddle.net/feitla/YSAsj/

有没有人知道如何使背景粘在居中的 div 上并重新调整而不像屏幕截图中那样在 div 下方移动的解决方案？

非常感谢！

4

3 回答 3

1

查看您的屏幕截图，您似乎希望在任何地方平铺的叶子背景都可以在白色容器下方接受，该容器应该只是灰色。您可以用叶子设计平铺主容器，而不仅仅是在下面覆盖一个<div>包含纯灰色背景的容器。

在这里小提琴 - http://jsfiddle.net/FgU6R/2/

HTML

<div id="leaf-bg">
    <div id="grey-bg">
        <div class="container">
        </div>  
    </div>
</div>

CSS

#leaf-bg
{
    background: url('http://s22.postimg.org/l1o86vn6l/leaf_sample.gif') repeat;
    width: 100%;
    height: 100%;
}
#grey-bg
{
    margin:0 auto;
    position: relative;
    background-color: #d2d1d1;
    width:330px;
    height: 500px;
}
.container 
{
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #AAAAAA;
    width:330px;
    height:300px; /*for demo only */
}
于 2013-07-05T19:38:40.137 回答
0

HTML 代码：

<div class="main">
<div id="bg1"></div>
<div id="bg2"></div>
</div>

CSS 代码：

.main {
width: xx px;
height: xx px;
}
#bg1 {
width: 50%;
height: 100%;
}
#bg2 {
width: 50%;
height: 100%;
}

您应该将marign 和padding 值分配给主类以使div 居中。您可以将其他代码添加到这些代码中。

于 2013-07-05T19:20:21.140 回答
0

最简单的方法是将背景作为重复背景放在主体上，即在主体上，或者在其中包含另一个 div 的 100% 宽度容器。

像这样......

<div id="backdrop"><div id="container"></div></div>

并让你的背景CSS...

#backdrop {
 Background: url(../yourimage.png) repeat-y;
 Width:100%;
 }

这涉及编辑您的图像，使其看起来像重复的图像......

于 2013-07-05T19:06:05.637 回答