你如何爲這些div編寫css？

Question

可以說我有三個部分的橫幅，第1部分和第3部分是曲線邊緣圖像，第2部分是水平矩形圖像。它看起來像

part1 ... part2 ... part3 

第一部分和第三部分是其圖像的尺寸，但第2部分應該有一個重複的背景圖像，使得第2部分的寬度的DIV調整到瀏覽器的寬度，使旗幟可調節到任何寬度的瀏覽器。你如何爲這三個div編寫css，以便它們一起創建任意長度的橫幅？

Answer 1

你的意思是這樣的嗎？

請參閱demo fiddle。

HTML：

<div class="banner"> 
    <span></span> 
    <span></span> 
</div> 

CSS：

.banner { 
    height: 120px; 
    background: url('middle-part-of-banner.png') repeat-x; 
    overflow: hidden; 
} 
.banner span { 
    display: inline-block; 
    width: 140px; 
    height: 120px; 
    background: url('end-parts-of-banner.png') no-repeat; 
} 
.banner span+span { 
    background-position: -580px 0; 
    float: right; 
} 

Answer 2

你可能會與風格中間BG嘗試。

你可以試試嗎？您可能需要稍微調整其他樣式屬性。 如果您在此處顯示左側和右側圖像，我可以用確切的代碼來幫助您。

.bg{ 
    background-image:url("path_to_repeating_bg");background-repeat:repeat-x;width:auto} 
} 

<div id="banner" style="clear:both"> 
    <div style="float:left"> 
     <img src="<left_img_path>" /> 
    </div> 
    <div class="bg" style="float:left;width:auto"> 
    </div> 
    <div style="float:left"> 
     <img src="<right_img_path>" /> 
    </div> 
</div> 

Answer 3

試試這個demo

<div class="banner"> 
    <div class="part1"> 

    </div> 

    <div class="part2"> 

    </div> 

    <div class="part3"> 

    </div> 
</div> 

CSS：

div.banner{ 
    width:100%; 
} 
div{ 
    display:inline; 
    height:100px; 
    solid:red; 
    float:left; 
} 
div.part1{ 
    width:2%; 
    border-raduis:5px; 
    background:red; 
} 
div.part3{ 
    width:2%; 
    background:red; 
} 
div.part2{ 
    width:96%; 
    background:blue; 
} 

只是改變了第一部分的背景下，第2部分和第三部分的背景圖片，你有。

Answer 4

我喜歡使用：之前和之後的這些東西。它保持了HTML的清潔，讓我的頭腦更有意義。

HTML：

<div id="banner"></div> 

CSS：

#banner { 
    height: 100px; 
    background: url(http://placekitten.com/1/100) repeat-x left top; 
    position: relative; 
    z-index:1 
} 

#banner:before, #banner:after { 
    content: ''; 
    height: 100px; 
    width: 100px; 
    position: absolute; 
    top: 0; 
    z-index: 2; 
} 

#banner:before { 
    left: 0; 
    background: url(http://placekitten.com/100/100) no-repeat left top; 
} 

#banner:after { 
    right: 0; 
    background: url(http://placekitten.com/100/100) no-repeat left top; 
} 

的jsfiddle：http://jsfiddle.net/blineberry/3BapK/