Sử dụng hình ảnh WebP trên trang web

Question

Tôi muốn thử sử dụng hình ảnh ở định dạng WebP làm hình nền trên các trang web của tôi. Nhưng tôi không chắc chắn, làm thế nào làm cho điều kiện trong CSS rằng nếu trình duyệt không hỗ trợ định dạng WebP vì vậy trong trường hợp này sử dụng hình ảnh jpg cổ điển. Tôi tìm mã ví dụ này, nụ nó không hoạt động

.mybackgroundimage { 
    background-image: url("image.jpg"); 
    background-image: image("image.webp" format('webp'), "image.jpg"); 
} 

Answer 1

Bạn phải sử dụng modernizr để phát hiện xem trình duyệt hỗ trợ webp hay không và sau đó áp dụng phong cách thích hợp để nó

.no-webp .mybackgroundimage 
{ 
background: url('image.jpg') no-repeat; 

} 

.webp .mybackgroundimage 
{ 
background: url('image.webp') no-repeat; 

}