css - 如何开始向下 20px 的背景图像？

Question

我环顾四周，这似乎很简单，但我似乎无法解决。

我有一个带背景的 div。我希望背景从 20px 开始向下，然后重复-y，就像在其余部分向下重复一样。

<div class="main_col"></div>
.main_col {
    width: 680px;
    float: left;
    background:#fff;
    background-position:50% 50%;
}

这就是我正在尝试的，但它正在填充整个 div？

这是我尝试过的...... http://jsfiddle.net/uzi002/gqqTM/4/

score 1 · Accepted Answer

您不能使用当前 CSS2 标准中的一个类定义来做到这一点。

使用单独的 div 作为背景。

如果你想摆弄一些 CSS3，你可以查看

background-origin

请注意浏览器支持。

score 0 · Accepted Answer

您可以尝试将 padding-top: 20px 添加到 .main_col 并在其中创建具有此背景的附加 div。

score 0 · Accepted Answer

.main_col {
    width: 680px;
    float: left;
    background: url("your image") 0px 20px;        
}

更新

这是使用giker的示例尝试这样的事情

score 0 · Accepted Answer

有 3 个与实现此目的相关的 CSS 属性：

现在，这一切都非常冗长，但可以浓缩为一条规则，如下所示：

background { url(myBackground.png) no-repeat 1px 1px }

可以使用相对值（例如代码显示的 %）作为背景位置，但您需要使用 px。

score -1 · Accepted Answer

尝试使用边距填充。

IE

.main_col {
    width: 680px;
    float: left;
    background:#fff;
    background-position:50% 50%;
    padding-top:20px;
}

5 回答 5