css – 在网站上使用WebP图像

前端之家收集整理的这篇文章主要介绍了css – 在网站上使用WebP图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Detecting WebP support12个
我想尝试使用WebP格式的图像作为我的网页上的背景图像.
但是我不确定,如果在这种情况下浏览器不支持WebP格式的CSS如何使用经典的jpg图像.
我发现这个示例代码,芽不起作用
  1. .mybackgroundimage {
  2. background-image: url("image.jpg");
  3. background-image: image("image.webp" format('webp'),"image.jpg");
  4. }

解决方法

您必须使用 modernizr来检测浏览器是否支持webp,然后对其应用适当的样式
  1. .no-webp .mybackgroundimage
  2. {
  3. background: url('image.jpg') no-repeat;
  4.  
  5. }
  6.  
  7. .webp .mybackgroundimage
  8. {
  9. background: url('image.webp') no-repeat;
  10.  
  11. }

猜你在找的CSS相关文章