CSS: Chỉ có thể lặp lại một phần của hình ảnh để sử dụng làm nền?

Question

tôi có một hình ảnh mà là một hình chữ nhật góc tròn, tôi sử dụng nó cho phần trên và dưới của nền bằng cách sử dụng:

#content_top { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content_bottom { /* 760px by 30px */ 
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll; 
    height: 10px; 
} 

sau đó tôi sử dụng một hình ảnh chiều cao 1px để lặp lại theo chiều dọc để điền vào khu vực này trong -giữa cho nền của div này. như thế này:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll; 
} 

bây giờ tôi tự hỏi có thể chỉ sử dụng cùng một hình ảnh (content_top_bottom.png), nhưng chỉ một phần của nó, để đạt được hiệu quả tương tự? tôi đã thử một cái gì đó như thế này, nhưng nó không hoạt động:

#content { /* 760px by 1px */ 
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll; 
} 

tôi muốn sử dụng cùng một hình ảnh vì tôi muốn giảm số lượng yêu cầu http. hình ảnh 1px có lẽ sẽ không có tác động lớn, nhưng tôi chỉ muốn thử. bất cứ ai có thể giúp đỡ?

Answer 1

Đặt hình ảnh 2280 x 10 bằng cách đặt các phần trên cùng, giữa và phần dưới bên cạnh nhau. Sau đó, bạn có thể lặp lại phần giữa:

#content_top { 
    background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll; 
    height: 10px; 
} 

#content { 
    background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll; 
} 

#content_bottom { 
    background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll; 
    height: 10px; 
} 

Answer 2

tôi sẽ đề nghị sử dụng 3 hình ảnh, trên trang web:

1. sprites không lặp lại Standard. Đây sẽ là content_top_bottom.png trong trường hợp của bạn (mặc dù nó có thể là tốt hơn để đổi tên nó để nó chung chung hơn và có thể được sử dụng cho các bộ phận khác).
2. Hình ảnh "lặp lại-x". Đây sẽ là một hình ảnh rộng 1px (hoặc nhiều hơn một chút, tùy thuộc vào thiết kế) nhưng rất cao. Trong này, bạn sẽ đặt tất cả các hình ảnh lặp lại theo chiều ngang.
3. Hình ảnh "lặp lại", tương tự như # 2, ngoại trừ chiều cao 1px và rất rộng. Ở đây bạn sẽ đặt hình ảnh content_body.png của mình.

Mặc dù trong trường hợp hiện tại của bạn, kết quả là 2 yêu cầu HTTP, nó có thể mở rộng nhiều hơn vì bạn sẽ không sử dụng nhiều hơn 3. Thật không may cho hình nền có cả hai hướng, chúng phải là cá nhân.

Bạn cũng có thể quan tâm để đọc về thuộc tính CSS3, border-image, cho phép bạn sử dụng một hình ảnh cho một phần tử hoàn chỉnh. Nó chưa được hỗ trợ tốt nhưng hy vọng nó sẽ không còn là quá!