CSS 有限背景重复（多个背景图像）

Question

我正在尝试为带有单个 CSS 条目的下拉菜单制作一个很酷的背景效果（具有 alpha 透明度和圆角）。

我有一个顶盖 (180 x 4 px)、一个底盖 (180 x 20px) 和一个重复的中间 (180 x 2px)。

这是我现有的相关 CSS：

background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position:left top, left bottom, 0px 10px;
background-repeat:no-repeat, no-repeat, repeat-y;

问题在于，需要可扩展/可平铺的中间部分在顶盖和底盖下一直重复——这样我的圆角现在是方形的，因为它们下面有重复的中间部分。

有没有办法防止多个背景重叠？？

提前致谢！

Answer 1

Background-origin and/or background-clip 应该可以解决问题。只需设置顶部和底部边框等于您的帽子图形的高度，然后将 drop_middle 设置为 background-clip:padding-box

---

编辑：这是一个完整的解决方案，但对于水平方向： http://jsfiddle.net/nGSba/

#box
{
    display: inline-block;
    margin: 1em;
    padding: 9px;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    background-image: url(http://s11.postimage.org/ufpdknvjz/left.png), 
          url(http://s11.postimage.org/6ng294tj3/right.png),
          url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left top, right top, left top;
    background-origin: border-box,border-box,padding-box;
    background-clip: border-box,border-box,padding-box;
}

让我卡住的是border-color 上的transparent。背景总是会在边框下，所以如果你的边框是实心的，背景仍然是不可见的。

Answer 2

无论您将图像应用到什么元素，请尝试执行以下操作（为了便于说明，我假设为 div）：

div {
    background-image: url('images/drop_top.png'), url('images/drop_bottom.png');
    background-position:left top, left bottom;
    background-repeat:no-repeat, no-repeat;
    position: relative;
}

div:after {
    position: absolute;
    top: 10px ; /* whatever your top image height is */
    bottom: 10px; /* whatever your bottom image height is */
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url('images/drop_middle.png');
    background-position: left top;
    background-repeat: repeat-y;
}