如何设置同一张图片在段标签中的不同背景图片格式(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

我建议你使用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');">