具有多个背景且重复次数不同的 CSS答案

【问题标题】：CSS with multiple backgrounds with different repeats具有多个背景且重复次数不同的 CSS
【发布时间】：2017-08-10 20:00:49
【问题描述】：

我做了一些谷歌搜索，但无法阻止背景图像重叠。我想要做的是有一个背景褪色的 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-bottom.png 在 content-top 之后重复

发生了什么：

【问题讨论】：

标签： html css background background-image

【解决方案1】：

删除background-position 并调整background-repeat 怎么样：

background-repeat: repeat-x, repeat;

jsFiddle

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

用一个单独的元素制作边界，所以顶部的一个元素背景和一个用于底部背景。
您可以编辑图像以使过渡更加平滑，因此您无法真正看到边框是否重叠（半透明图像使平滑过渡变得容易）

【讨论】：

奇怪，当我使用 jsfiddle 中的图像尝试它时，它工作得很好，但是当我使用我的图像时，它仍然重叠。
您可以上传您正在使用的图片，以便我们查看发生的情况或上传屏幕截图吗？或者创建自己的jsFiddle ^^
哇！没想到^^你可以回答你自己的问题并接受它:)

【解决方案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

【讨论】：

【解决方案3】：

如果你有一个已知的最大高度并且你已经在 ":before" 中，这是一种激进但有效的处理方法：

&: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;
}

【讨论】：