Verwenden Sie WebP-Bilder auf der Website

Question

Ich möchte versuchen, Bilder im WebP-Format als Hintergrundbilder auf meinen Webseiten zu verwenden. Aber ich bin mir nicht sicher, wie Bedingung in CSS, dass, wenn Browser WebP-Format nicht unterstützen, so in diesem Fall verwenden Sie klassische JPG-Bild. Ich finde das Beispielcode, knospen es nicht

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

Answer 1

Sie müssen modernizr verwenden funktioniert, ob die Browserunterstützung webp oder nicht zu erkennen und dann die entsprechenden Stil, um es

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

} 

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

}