css - 如何在section标签中设置相同图片的不同背景图片格式(png和webp)

Question

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

<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 ，在这种情况下，您可以使用我上面提供的脚本替换图像扩展名。