如何加载一个webp图像背景图片时，浏览器允许它，当不加载png?

Question

我正在尝试创建一个使用webp图像作为背景的标题，如果浏览器允许的话，但是当不允许时，我希望浏览器加载png代替。

这是我的HTML

<div class="no-webp">
<section class="section-hero box-container">
<div class="container">
<div class="row">
<div class="col-12 hero-bg">
</div>
</div>
</div>
</section>
</div>
<div class="webp">
<section class="section-hero box-container">
<div class="container">
<div class="row">
<div class="col-12 hero-bg">
</div>
</div>
</div>
</section>
</div>

这是我目前用到的CSS:

section.section-hero{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 296px;
}
.webp section.section-hero {
background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.webp);
}
.no-webp section.section-hero {
background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.png);
}

但是我不知道如何把所有的东西联系在一起，你知道吗?

Answer 1

如果php是一个选项，我建议使用:

if( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// yeah, webp is supported!
}

如果你需要通过JS来做，那么看看这个

Answer 2

您可以使用这里解释的方法检查浏览器。从那里，您可以检查浏览器是否有它，并将相关类添加到有问题的HTML元素。

每个背景图像都有不同的类。例如:

.webp-supported {
background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.webp);
}
.webp-not-supported {
background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.png);
}

Answer 3

我的方法是在HTML中使用<picture>标记。这将在每个浏览器中工作，因为不支持picture标记的浏览器将只显示<img>中指定的任何源。例如:

<picture>
<source srcset="/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.webp" type="image/webp">
<source srcset="/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.png" type="image/png"> 
<img src="/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.png" alt="Hero Banner">
</picture>