如何在不填充内容的情况下向重复的 CSS 背景添加填充？

Question

有没有什么方法可以填充重复的背景图像，而不会同时向内容添加填充？

我有一个使用浮动创建的 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(https://i.sstatic.net/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;   
}

当与我的重复图像一起使用时：

它看起来像这样：

< img src="https://i.sstatic.net/MBjio.png" alt="在此处输入图像描述">

但我想调整重复图像的起点和点，以便出现填充，如下所示：

<图像src="https://i.sstatic.net/vEVwd.png" alt="在此处输入图像描述">

重要的是，当列缩放时，填充也会移动：

有谁知道如何实现这一点，最好没有额外的标记，并且绝对没有 JavaScript？

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

Answer 1

在您的 div.col css 定义中更改此设置：

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

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

正如 @BoltClock 所说，如果您还需要绿色边框，则这不起作用。如果你不需要边框，即使在 ie6 中也应该可以正常工作。