Ripetizione di sfondo con limitazione CSS (più immagini di sfondo)

Question

Sto cercando di creare un effetto di sfondo interessante (con trasparenza alfa e angoli arrotondati) per un menu a discesa con una singola voce CSS.

Ho un coperchio superiore (180 x 4 px), un tappo inferiore (180 x 20 px) e un centro ripetuto (180 x 2 px).

Ecco il mio rilevanti CSS esistente:

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; 

Il problema è che la sezione centrale che deve essere espandibile/Tilable è ripetere tutta la strada sotto i tappi superiore e inferiore - in modo tale che i miei angoli arrotondati sono ora quadrati perché hanno il centro ripetitivo sotto di loro.

C'è un modo per impedire la sovrapposizione di più sfondi ??

Grazie in anticipo!

Answer 1

Background-origin and/or background-clip dovrebbe fare il trucco. Basta impostare top & bordi inferiori uguale all'altezza della grafica cap, quindi impostare drop_middle a background-clip:padding-box

---

EDIT: Qui è una soluzione completa, ma per un orientamento orizzontale: 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; 
} 

Quello che mi ha bloccato è stato il transparent su border-color. Lo sfondo andrà sempre a sotto il il bordo, quindi se il tuo bordo è solido lo sfondo sarà comunque invisibile.

Answer 2

Qualunque sia il vostro elemento è che si sta applicando le immagini, provare a fare quanto segue (darò per scontato div per amore di illustrazione):

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