如何在沒有填充內容的情況下將填充添加到重複的CSS背景？

是否有任何方法來填充重複的背景圖片，它不會將填充添加到內容中？如何在沒有填充內容的情況下將填充添加到重複的CSS背景？

我有一個3列布局創建使用浮動和清除元素，以確保容器是正確的高度。下面是該代碼：

HTML

<div id="container"> 
    <div id="col1" class="col">col 1</div> 
    <div id="col2" class="col">col 2</div> 
    <div id="col3" class="col">col 3</div> 
    <div class="clearFix"></div> 
</div>

CSS

div#container { 
    width:340px; 
    border:1px solid #0f0; 
    margin:30px; 
    background:url(http://i.stack.imgur.com/PEE4K.png) 0 0 repeat-y; 
} 

div.col { 
    float:left; 
    width:100px; 
    height:60px; 
    margin:0px 10px; 
    background-color:#f00; 
} 

div#col1 { 
    margin-left:0; 
} 

div#col3 { 
    margin-right:0;  
} 

div.clearFix { 
    clear:both; 
}

當我重複的圖像使用：

enter image description here

它看起來像這樣：

enter image description here

但我想這樣看來，填充調整開始和重複圖像的點，就像這樣：

enter image description here

重要的是，當列縮放填充移動過：

enter image description here

有沒有人有一個想法如何做到這一點，最好沒有附加的標記和DEF啓動沒有JavaScript？

http://jsfiddle.net/shanethehat/a2EKM/

來源

2012-01-18 shanethehat

改變這在你的div.col CSS定義：

div#container { 
    margin:40px 30px; 
} 

div.col { 
    margin:-10px 10px; 
}

爲@BoltClock說，這不，如果你需要的綠色邊框以及工作。如果你不需要邊界，即使在ie6中也可以正常工作。

來源

2012-01-18 18:23:45 roberkules

收縮容器並將列推到其頂部和底部邊界之外。它不會將填充添加到容器的背景。也就是說，如果您還將容器的「邊框」樣式更改爲「大綱」樣式，則可以在Firefox和任何以這種方式繪製輪廓的瀏覽器中實現所需的結果。 – BoltClock 2012-01-18 18:29:42

好，結果看起來一樣，不是嗎？爲我工作：http://jsfiddle.net/roberkules/a2EKM/3/ – roberkules 2012-01-18 18:43:43

不，他們看起來完全不同。在該示例中，綠色邊框仍然圍繞着列。在你的小提琴中，綠色的邊框只能圍繞背景，被列遮蔽。 – BoltClock 2012-01-18 18:45:26

如何在沒有填充內容的情況下將填充添加到重複的CSS背景？

回答

相關問題