Cách sử dụng CSS sprite cho hình nền Lặp lại?

Question

Đây là điều mà tôi đã gặp rắc rối trong quá khứ và đó là trong tâm trí của tôi vì vậy tôi đã thực hiện một hình ảnh ví dụ đơn giản sprite để kiểm tra và hy vọng nhận được một số câu trả lời.

Nếu bạn xem mã và demo đây http://dabblet.com/gist/2263037

Bạn sẽ thấy rằng tôi có một div đơn giản mà sử dụng một hình nền

Dưới DIV rằng tôi có cùng một div nhưng lần này tôi cố gắng để sử dụng một hình ảnh CSS Sprite thay vì

Vì vậy, câu hỏi của tôi, là nó có thể nhân rộng giao diện của DIV đầu tiên bằng cách sử dụng hình ảnh sprite này hoặc là những thay đổi cần thiết trên hình ảnh sprite?

Without Sprite ảnh

/* Notice wrapper with Single Image */ 
.notice-wrap { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; 
} 

Với Sprite ảnh

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat; 
    background-position: 0 -52px; 
} 

HTML

<div class="notice-wrap"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

<BR><BR><BR> 

<div class="notice-wrap-sprite"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

Answer 1

Thiết lập ma

Bạn có thể sử dụng một sprite ảnh để làm những gì bạn muốn. Chúng chỉ có thể lặp lại dọc theo một trục, tức là lặp lại-x, nhưng trong trường hợp của bạn, đó là tất cả những gì bạn cần. Ngoài ra hình ảnh của bạn trong sprite phải chạy toàn bộ chiều rộng, đây là cách trình duyệt biết để gạch nó.

Bí quyết là nền lặp lại của bạn phải mở rộng trên FULL WIDTH của hình ảnh sprite của bạn. Điều này là rất quan trọng.Dưới đây là hình ảnh của bạn, thay đổi để đáp ứng tiêu thức:

Thiết lập CSS

Bây giờ chúng ta chỉ cần tham khảo nó như thường lệ, và nó sẽ làm việc tốt:

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x; 
    background-position: 0 -52px; 
} 

Answer 2

Tôi nghĩ rằng bạn cần phải đặt sprite trên hàng riêng của nó trong trường hợp này. Điều này sẽ hoạt động vì hình ảnh của bạn bị ràng buộc theo chiều dọc đến chiều cao được đặt. Ít nhất đó là những gì nó trông giống như trong ví dụ.

Ngoài ra, hình ảnh sẽ cần phải có cùng chiều rộng với sprite. Lý do hình nền cần mở rộng chiều rộng của sprite là vì bạn đang lặp lại trên trục x và nếu có khoảng trống hoặc một hình ảnh khác ở bên trái của sprite, bạn sẽ nhận được một cái gì đó tương tự như ví dụ của bạn.

Trong ví dụ của bạn, hình ảnh trong sprite của bạn có thể không phù hợp với hình nền đó vì chúng quá rộng. Vì vậy, sẽ tốt hơn nếu bạn chọn các hình ảnh khác phù hợp với kích thước của hình nền đó, có thể là nhiều hình nền hơn vì thường bạn có thể sử dụng hình ảnh mỏng hơn. Xem ví dụ bên dưới mà tôi sử dụng trên một trong các trang web của tôi. Và như msigman đã nói, bạn có thể thêm lặp lại-x để đảm bảo nền chỉ lặp lại dọc theo trục x, nhưng nếu bạn đã hạn chế div của bạn ở một độ cao nhất định và định vị chính xác ma, thì lặp lại-x có thể không quan trọng, nhưng nó an toàn hơn.