背景位置和重复?

也许你应该用 :after 或 :before 因为不需要在HTML中添加额外的标记。这样地:

.container{
    height:400px;
    background:red;
    position:relative;
    width:400px;
}
.container:after{
    content:"";
    position:absolute;
    top:20px;
    left:0;
    right:0;
    bottom:0;
    background:url(http://lorempixel.com/400/200) repeat-y;
}

检查这个 http://jsfiddle.net/h6K9z/

它在上面的IE8中工作。对于IE7或IE6,您可以提供额外的 DIV 为了这个。

我喜欢速记法:

.yourClass {
    background: url(../images/yourImage.png) repeat-y 0 20px;
}

我不认为简单地结合 background-position 和 background-repeat 例如 repeat-y 0 20px 会有用的。假设这个 jsFiddle sample 表示op的情况,解决方案应使绿色背景从(垂直)20px开始;显示“你好!”文本不应位于绿色背景之上。

我的答案是,这不能简单地通过CSS完成;也就是说,您可能希望更改HTML结构来实现您的目标。然而,我开始慷慨地希望其他人能想出更好的答案。

.yourClass{
    background: url(images/yourImage.png) repeat-y;
    background-position: 0px 20px;
}

http://www.w3schools.com/css/pr_background-position.asp

你只需要 background-position 要设置的属性:

background-position: 0px 20px;
background-repeat: repeat-y;