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

背景原点和/或背景剪辑应该可以解决问题.只需将顶部和底部边框设置为等于封面图形的高度,然后将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;
}

是什么让我卡住transparent了border-color.背景将始终位于边框下方,因此如果边框是实线,则背景仍然不可见.