javascript - 仅重复分隔线背景图像的中间

Question

好的，我有一个顶部和底部逐渐褪色的分隔图像，如下所示: 我可以使用一个 sprite 和 3 个 DIV 来只重复它的中间部分吗？我不得不提到我的高度是可变的。我怎么能做那样的事情？我需要 3 张图片(顶部、中间和底部)吗？

当前的 HTML 和 CSS 代码:

HTML:
<div class="left-side">
</div>
<div class="vdiv25p"></div>
<div class="right-side"></div>

CSS:
.left-side {
display: inline-block;
width: 720px;
}

.vdiv25p {
display: inline-block;
width: 24px;
height: 658px;
background-image: url(../images/vdiv-large.png);
background-position: center center;
background-repeat: no-repeat;
}

.right-side {
width: 236px;
display: inline-block;
vertical-align: top;
}

附言我知道如何使用 JavaScript 或 jQuery 来实现，但我想知道是否有仅 CSS 的解决方案:)

Answer 1

我想我明白你现在的要求了。如有误请指正。

http://jsfiddle.net/6fowh58o/

.vdiv25p {
    display: inline-block;
    width: 24px;
    height: 658px;
    background-image: url("http://www.artwork.com/press_rl/solid.gif"),url("http://www.artwork.com/press_rl/solid.gif"), url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png");
    background-position: top, bottom, center;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size: 100% 10%, 100% 10%, 100% 10%;

这段代码实现了我相信您正在寻找的东西。在一个 div 中设置多个背景图像(本例中为 3 个)。一张图片设置在顶部(背景位置)，一张设置在底部，一张设置在中间。在 (background-image) 属性中指定图像的顺序设置了它们之间的对比(Z-index 类效果)。背景大小告诉对象它们将采用其父元素的什么(宽度，高度)。要获得重复的中心图像，您可以使用正常(背景重复)值。