CSS限制背景重複（多個背景圖像）

Question

我想爲單個CSS條目的下拉菜單製作一個很酷的背景效果（帶有alpha透明度和圓角）。我有頂帽（180 x 4像素），底帽（180 x 20像素）和重複中間（180 x 2像素）。

這裏是我現有的相關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; 

的問題是，中間部分，其需要可擴展/ tilable是在頂部和底部的蓋子重複所有的方式 - 例如，我的圓角現在是方形的，因爲它們有重複的中間。

有什麼辦法可以防止多重背景重疊？

在此先感謝！

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; 
}