Question

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

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

我想要完成的是让此快照中的叶子背景根据浏览器的宽度进行调整：http://grab.by/odcy在此屏幕截图中，我调整了宽度较小且div移位但背景仍然留在我给他们的％。你得到了我不想要的重叠效果。

/ **编辑** /

居中的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下移动？

非常有责任！

Answer 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 */
}

Answer 2

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

喜欢这样......

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

让你的css为背景......

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

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

Answer 3

HTML code：

<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%;
}

您应该为主要类别分配边距和填充值以使居中div。您可以为这些代码添加其他代码。

如何使2个背景“粘”到中心div的两侧

3 个答案: