具有多个背景和不同重复的CSS

Question

我做了一些谷歌搜索，无法阻止我的背景图像重叠。我想要做的是拥有一个褪色背景的div。但是当淡入淡出达到完全不透明度时，我想要应用一个可以重复的不同背景图像，这样无论div有多长，div都看起来完美无瑕。

我已经考虑过为每个网页应用全长图像，但我宁愿让它工作，所以我不需要担心我可以对每个页面应用多少内容。

#content_holder{
width:800px;
height:1000px;
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png);
background-position:0 0,0 240px;
background-repeat:no-repeat,repeat-y;
}

添加注释：高度为1000px，这纯粹是出于测试目的，因为div目前是空的。

第二个图像重复，但从div的顶部开始，与另一个图像重叠。

这些是图像：

content-top.png显示一次 content-top.png在content-top之后重复

发生了什么事：

Answer 1

如何删除background-position并调整background-repeat：

background-repeat: repeat-x, repeat;

<强> jsFiddle

修改
嗯，多个背景就像这样。它是重叠的，因为它下面的边界有完整的高度（它正在重复）。背景不会将其他背景视为边界。你可以做两件事：

1. 使用单独的元素创建边界，因此顶部有一个元素 背景和一个底部背景。
2. 您可以编辑图像以使过渡更加平滑，因此您无法真正看到边框重叠（半透明图像可以轻松实现平滑过渡）

Answer 2

    #content_holder{
    width:800px;
    height:1000px;
   background-color:rgba(0,0,0,.65);
    position: relative;
    z-index: 2;
    background: url(http://i.stack.imgur.com/j3THB.png) top left no-repeat, url(http://i.stack.imgur.com/35j7u.png)  bottom left no-repeat;
}
#content_holder:before{
     content: '';
    position: absolute;
    z-index: -1;
    top: 240px;
    right: 0;
    bottom: 0px;
    left: 0;
     background: url(http://i.stack.imgur.com/35j7u.png) top left repeat-y;

}

解决它并不完全确定完整的解释，但它找到了this post，它与我的非常相似。

JSFIDDLE

Answer 3

如果你有一个已知的最大身高并且你已经在＆＃34;：之前＆＃34;：

，那么这是一个彻底但有效的方法来解决这个问题。

&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}