如果浏览器不支持WebP格式，如何在CSS background-image属性中指定替代图像 &g

Question

我有一个带有背景图像的元素

<div class="col-sm-6 col-lg-4"><a class="thumbnail" href="~/home/products"
style="background-image: url(/../images/image-370x370.jpg)">
<div class="thumbnail-caption">
<h3 class="thumbnail-heading">E-Commerce</h3>
<div class="thumbnail-inner">
<div class="thumbnail-content">
this is a complete e-commerce solution through which you can manage your online store.
</div>
<div class="thumbnail-icon fa-angle-right"></div>
</div>
</div></a>
</div>

在第二行style="background-image: url(/../images/image-370x370.jpg)"我想使用WebP格式的图像与css背景图像，以减少请求的大小，并指定替代图像，如果不支持WebP。

对于图片元素也可以这样做:

<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>

Answer 1

使用<<背景图片:"image-set"在比;如:

style='background-image: url("/../images/image-370x370.jpg");
background-image: image-set("/../images/image-370x370.webp", "/../images/image-370x370.jpg");
background-image: -webkit-image-set("/../images/image-370x370.webp", "/../images/image-370x370.jpg");'

这对我来说很有效。

Answer 2

您可以使用多个图像:

style="background-image: url(/../images/image-370x370.webp),
url(/../images/image-370x370.jpg)"