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

我建议您使用JS处理该问题。例如，您可以在页面上找到所有样式为background或background-image的元素，然后将webp图像替换为jpeg版本。这样您的脚本将如下所示：

document.deepCss= function(who, css){
  if(!who || !who.style) return '';
  var sty= css.replace(/\-([a-z])/g, function(a, b){
    return b.toUpperCase();
  });
  if(who.currentStyle){
    return who.style[sty] || who.currentStyle[sty] || '';
  }
  var dv= document.defaultView || window;
  return who.style[sty] ||
      dv.getComputedStyle(who,"").getPropertyValue(css) || '';
};
var elms = document.getElementsByTagName('*');
for (var i=0;i<elms.length;i++) {
  var url = document.deepCss(elms[i], 'background-image');
  if (url) {
    url=/url\(['"]?([^")]+)/.exec(url);

    if (url && url[1]) {
      elms[i].style.backgroundImage = "url("+url.replace('.webp', '.jpeg')+")"
    }
  }
}

使用相同名称的两种格式存储同一图像会容易得多，例如test.jepg和test.webp，在这种情况下，您可以使用脚本替换图像扩展名我在上面提供的。

Answer 2

如果您不想使用 JavaScript 来提供特定于客户端的格式，请考虑将 <picture> 标记与两个来源一起使用，并使用 CSS 以及 position: absolute 和 z-index: -1 来推送图像进入后台。

为了扩展您的示例，以下是它的工作原理：

HTML

<div class="sec-bg">
  <div class="sec-bg__image">
    <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> 
  </div>
 
  <div class="sec-bg__content">
    <p>Your section content goes here!</p>
  </div>
</div>

CSS

.sec-bg
{
  position: relative;
  z-index: 0;
}

.sec-bg__image
{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-indez: -1;
}

Answer 3

您是否尝试过以下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');">

如何在部分标签中设置同一张图片的不同背景图片格式（png和webp）

3 个答案: