仅重复分隔背景图像的中间部分

Question

好的，所以我有一个分割器图像，顶部和底部部分像这样褪色： 我可以使用精灵和3个DIV来重复它的中间部分吗？我必须提到我的身高是多变的。我怎么能这样做？我需要3张图片（顶部，中部和底部）吗？

目前的HTML＆amp; 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;
}

P.S。我知道如何使用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）。一个图像设置在顶部（背景位置），一个图像设置在底部，一个图像设置在中心。在（背景图像）属性中指定图像的顺序设置它们相互之间具有的（Z-index效果）。背景大小告诉对象他们的父元素将采用什么（宽度，高度）。要获得重复的中心图像，您可以使用正常（背景重复）值。