html - 具有不同重复的多个背景的 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-bottom.png 在 content-top 之后重复

发生了什么:

Answer 1

如果只删除 background-position 并调整 background-repeat:

background-repeat: repeat-x, repeat;

jsFiddle

编辑
嗯，多背景就是这样。它是覆盖的，因为它下面的边框具有完整的高度(它是重复的)。背景不会将其他背景视为边界。你可以做两件事:

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