1

我做了一些谷歌搜索，无法阻止我的背景图像重叠。我想要做的是有一个背景褪色的 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 之后重复 内容底部

发生了什么： 在此处输入图像描述

4

3 回答 3

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;

}

在完整的解释中解决它并不完全确定，但它可以找到这篇文章，它与我的非常相似。

JSFIDDLE

于 2013-10-30T10:23:43.717 回答
2

只需删除background-position和调整background-repeat：

background-repeat: repeat-x, repeat;

jsFiddle

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

  1. 使用单独的元素制作边界，因此一个元素用于顶部背景，一个元素用于底部背景。
  2. 您可以编辑图像以使过渡更平滑，因此您无法真正看到边框确实重叠（半透明图像使平滑过渡变得容易）
于 2013-10-30T09:23:22.113 回答
0

如果你有一个已知的最大高度并且你已经在 ":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;
}
于 2017-08-10T12:00:49.777 回答