Cú pháp nhiều nền - Thủ thuật CSS

Anonim

Các trình duyệt hỗ trợ nhiều nền (WebKit từ những ngày đầu, Firefox 3+) sử dụng cú pháp như sau:

#box ( background: url(icon.png.webp) top left no-repeat, url(texture.jpg.webp), url(top-edge.png.webp) top left repeat-y; )

Chúng là các giá trị được phân tách bằng dấu phẩy và có thể có bao nhiêu tùy ý với các giá trị URL, định vị và lặp lại khác nhau. Bạn thậm chí có thể kết hợp các gradient của WebKit vào hỗn hợp:

#box ( background: url(… /images/arrow.png.webp) 15px center no-repeat, -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818)); )

IE cũ trên máy Mac sẽ hiển thị nền đầu tiên trong danh sách, nhưng các trình duyệt khác không hỗ trợ nó sẽ bị lỗi và không hiển thị nền. Điều này làm cho nó trở thành một trường hợp khó cho việc nâng cao tiến độ. Đó là, trừ khi bạn sử dụng một công cụ như Modernizr để phát hiện hỗ trợ cho nó và viết một bộ chọn dự phòng chỉ khai báo một nền cho các trình duyệt không hỗ trợ nó.