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

是否有任何方法可以填充重复的背景图像，而不会向内容添加填充

我使用float创建了一个3列布局，并使用clearing元素确保容器的高度正确。以下是代码：

HTML

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

看起来是这样的：

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

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

有没有人知道如何做到这一点，最好不用额外的标记，当然也不用JavaScript

---

在div.col css定义中更改此选项：

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

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

---

正如@BoltClock所说，如果你也需要绿色边框，那么这就不起作用了。如果您不需要边框，即使在ie6中也可以使用。

这会缩小容器并将列推到其顶部和底部边框之外。它不会将填充添加到容器的背景中。也就是说，如果你也将容器的

边框

样式更改为

大纲

样式，那么在Firefox和任何以这种方式绘制其大纲的浏览器中都会达到预期的效果。那么，结果看起来是一样的，不是吗？为我工作：不，它们看起来完全不同。在本例中，绿色边框仍然围绕着柱。在你的小提琴中，绿色边框仅环绕背景，被列遮住。是的，但我认为绿色边框只是为了理解问题，而不是作为最终设计的一部分。负边距也会将列上移10像素。您可以简单地将容器向下推，容器上有额外的边距来反转，因此对于列上的-10px垂直边距，您可以将容器上的垂直边距增加10px，因此

margin:40px 30px

。

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

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

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