Lặp lại nền giới hạn CSS (nhiều hình nền)

Question

Tôi đang cố tạo hiệu ứng nền mát (với độ trong suốt alpha và góc tròn) cho menu thả xuống với một mục nhập CSS duy nhất.

Tôi có một giới hạn hàng đầu (180 x 4 px), nắp dưới (180 x 20px) và trung bình lặp lại (180 x 2px).

Dưới đây là CSS liên quan của tôi hiện có:

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; 

Vấn đề là phần giữa mà cần phải được mở rộng/tilable là lặp đi lặp lại tất cả các cách dưới mũ trên và dưới - chẳng hạn rằng góc tròn của tôi bây giờ là hình vuông vì chúng có phần giữa lặp lại bên dưới chúng.

Có cách nào để ngăn chặn nhiều hình nền trùng lặp không ??

Cảm ơn trước!

Answer 1

Background-origin and/or background-clip nên thực hiện thủ thuật. Chỉ cần thiết lập đầu & viền cho cạnh dưới bằng với chiều cao của đồ họa nắp của bạn, sau đó đặt drop_middle để background-clip:padding-box

---

EDIT: Đây là một giải pháp hoàn chỉnh, nhưng đối với một định hướng ngang: 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; 
} 

Điều khiến tôi bị kẹt là số transparent trên số border-color. Nền sẽ luôn luôn đi dưới đường viền, vì vậy nếu đường viền của bạn chắc chắn thì nền sẽ vẫn ẩn.

Answer 2

Dù yếu tố của bạn là bạn đang áp dụng các hình ảnh để, hãy thử làm như sau (tôi sẽ giả div vì lợi ích của hình minh họa):

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