如何在section标签中设置相同图片的不同背景图片格式（png和webp）

Question

我已经开始在我的网站中使用带有<picture>标签的webp 图像。除此以外的所有设置

<section class="sec-bg" style="background: url('images/bg.jpg');"> 

我不知道，如何设置同一图像的不同背景图像格式（png 和 webp）。请在 section 标签中给出这个内联 CSS 的解决方案。

对于其他图像，我使用下面的代码

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture> 

Answer 1

您尝试过下面的 CSS 规则吗？

background-image: url('img/image1.webp'), url('img/image1.jpg');

考虑到两个图像相同，如果第一个图像不存在，则将使用第二个图像。这样，它就像一个“后备图像”。

内联解决方案可以是

<section class="sec-bg" style="background-image: url('img/image1.webp'), url('img/image1.jpg');">