Ghi đè kiểu hình nền CSS - cả hai hình ảnh đều được tải?

Question

Nếu tôi có 2 kiểu CSS gán hình nền cho một phần tử và một kiểu ghi đè lên phần tử kia. Cả hai hình ảnh sẽ được trình duyệt tải xuống hay chỉ là một hình ảnh ghi đè?

Lý do tôi hỏi là gần đây tôi đã tham dự một hội thảo về bảng định kiểu có điều kiện cho thiết bị di động. Nếu tôi ghi đè hình ảnh bg bình thường của mình với hình ảnh nhỏ hơn để tiết kiệm băng thông, liệu các hình ảnh lớn hơn có được tải không? Điều này dường như là những gì anh chàng đã nói nhưng có vẻ lạ với tôi nó sẽ làm việc theo cách này.

Answer 1

Dường như trong một số trường hợp, câu trả lời là có:

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/examples/mediaqueries/image-test/#t4

Answer 2

Bạn không thể thực hiện thử nghiệm và xem tệp nhật ký web để xem điều gì đang xảy ra?

Nếu không, tại sao không có một chút PHP để chọn các kiểu trang thích hợp tùy thuộc vào thiết bị.

Answer 3

Hình ảnh được ghi đè sẽ không được tải.

Chỉ cần được rõ ràng, ví dụ: http://jsfiddle.net/thirtydot/MjKfG/1/show/

<div id="test">test</div> 

div { 
    background: url(http://dummyimage.com/600x400/000/fff) 
} 
#test { 
    background: url(http://dummyimage.com/200); 
    width: 200px; 
    height: 200px 
} 

Chỉ http://dummyimage.com/200 sẽ được nạp.

Điều này đúng trong ít nhất là Chrome, Safari, Firefox, IE8/9, Opera.

Tôi muốn đoán đó là sự thật trong tất cả các trình duyệt, vì đó là một tối ưu hóa đơn giản và hiệu quả.

Answer 4

Câu trả lời là KHÔNG. Người đầu tiên bị ghi đè sẽ không tải thuộc tính nền. Tại sao? Bởi vì trình duyệt tải tệp css của bạn trước khi tải bất kỳ tài nguyên nào khác. Họ xử lý các tệp css trước rồi bắt đầu tải hình ảnh dựa trên thứ tự và thứ tự ghi đè.

Ví dụ:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites.png') no-repeat x y; 
} 

.mobile div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

trình duyệt sẽ xử lý css này cho điện thoại di động để trở thành như thế này:

div { 
    border: solid 1px #000000; 
    background: url('images/sprites_mobile.png') no-repeat x y; 
} 

Và bây giờ, trình duyệt đã bỏ sprites_mobile.png để tải.