css - 如何通过 CSS 检测是否支持 webp 图片

Question

如果支持 webp 图片，如何在 CSS 中检测？

.home-banner-background {
     background-image: url('img/banner.jpg');
 }
 /*Here is an if statement that will check if webp is supported*/ {
        .home-banner-background {
            background-image: url('img/banner.webp');
        }
}

是否有一个“if”语句可以做到这一点？

Answer 1

modern webkit browser将使用带有此 CSS 的 WebP 背景图片:

.map {background-image: url('../img/map.jpg');}
  @supports (background-image: -webkit-image-set(url('../img/map.webp') 1x)) {
    .map {background-image: -webkit-image-set(url('../img/map.webp') 1x) }
  }