Question

我目前在y上有一个重复的图像，但我希望它从div开始的地方开始下降20 px ....

我该怎么做？

Answer 1

也许您应该使用: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＆amp;以上。对于IE7或IE6，您可以为此提供额外的DIV。

Answer 2

我更喜欢速记法：

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

Answer 3

我认为只是简单地合并background-position和background-repeat，例如repeat-y 0 20px会奏效。假设这个jsFiddle sample表示OP的情况，解决方案应该使绿色背景从（垂直）20px开始; “你好！”文字不应该位于绿色背景之上。

我的回答是CSS无法做到这一点;意思是，您可能希望更改HTML结构以实现目标。但是，我正在开始一个赏金，希望其他人能够提出更好的答案。

Answer 4

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

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

Answer 5

您只需要设置background-position属性：

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

CSS：重复的背景位置？

5 个答案: