Question

我有以下规则：

background: url(../img/redlines.png) repeat-y left 50px;

正如您所看到的，背景图片应该在其div下方50px处开始，并且它与no-repeat一起使用，但如果我设置repeat-y图像的一部分也显示在div的顶部

任何方法可以避免这种情况，并且只能继续向下重复？

Answer 1

当你使用repeat-y时，在顶部添加50px只会改变重复开始的浮点数。

您需要添加边距或相对/绝对定位才能达到相同的效果。

Answer 2

这就是它应该起作用的方式。对于平铺图像，位置仅仅是起始位置。我会建议像：

HTML

<div class="foo">
    <div class="bar">
        <div class="content">
        </div>
    </div>
</div>

CSS

.foo {
    padding-top: 50px;
}
.bar
    background: url(../img/redlines.png) repeat-y left top;
}
.content {
    margin-top: -50px;    
}

Answer 3

因为你没有提供jsfiddle或任何图片，我假设你可以在css中尝试background-position属性。

请参阅：http://www.w3schools.com/cssref/pr_background-position.asp

Answer 4

您可以在容器上尝试：之后，请参阅此示例：jsfiddle

<div id="test"></div>
#test {
    width: 500px;
    height: 500px;
    position:relative;
}

#test:after {
    content:"";
    position:absolute;
    top:50px;
    left:0;
    right:0;
    bottom:0;
    background: url(http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg) repeat-y left;
}

repeat-y也将50px重复图像放在顶部

4 个答案:

HTML

CSS