CSS限定バックグラウンドリピート（複数の背景画像）

Question

単一のCSSエントリを含むドロップダウンメニューのクールな背景効果（アルファ透明度と丸みを帯びたコーナー）を作ろうとしています。

私はトップキャップ（180x4px）、ボトムキャップ（180x20px）、中間の繰り返し（180x2px）を持っています。ここで

は私の既存の関連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はすべきことです。ちょうどその時、あなたのキャップグラフィックの高さに等しいトップ&下の境界線を設定background-clip:padding-boxに

---

EDIT drop_middle設定： 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; 
}