Powtarzanie ograniczonego tła CSS (wiele obrazów tła)

Question

Próbuję zrobić fajny efekt tła (z przezroczystością alfa i zaokrąglonymi narożnikami) dla rozwijanego menu z pojedynczym wpisem CSS.

Mam górną czapkę (180 x 4 piksele), dolną nasadkę (180 x 20 pikseli) i środkową powtórzenie (180 x 2 piksele).

Oto mój istniejący odpowiedni 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; 

Problem polega na tym, że środkowy odcinek, który musi być rozszerzalna/tilable jest powtarzając całą drogę pod górną i dolną czapki - takie, że moje zaokrąglone narożniki są teraz kwadratowe, ponieważ mają pod nimi powtarzający się środek.

Czy jest jakiś sposób, aby zapobiec nakładaniu się wielu środowisk?

Z góry dzięki!

Answer 1

Background-origin and/or background-clip powinien załatwić sprawę. Wystarczy ustawić najlepszymi & granice dolne równa wysokości swoich grafik Cap, a następnie ustawić drop_middle do background-clip:padding-box

---

EDIT: Tutaj jest kompletnym rozwiązaniem, ale dla orientacji poziomej: 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; 
} 

To, co utknęło mi w pamięci, to transparent na border-color. Tło zawsze będzie pasowało pod granicą, więc jeśli twoja ramka jest niezmienna, tło będzie nadal niewidoczne.

Answer 2

Niezależnie elementem jest to, że starasz się obrazy do, spróbuj w następujący sposób (będę zakładać div przez wzgląd na ilustracji):

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