如何使2個背景“粘在”居中的div的側面

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代碼：

<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居中。 您可以在這些代碼中添加其他代碼。