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

【问题标题】：how to set the different background image format (png and webp) of the same image in section tag如何在section标签中设置同一张图片的不同背景图片格式（png和webp）
【发布时间】：2019-11-09 13:03:43
【问题描述】：

我已经开始在我的网站中使用带有 <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>

【问题讨论】：

This CSS tricks article 建议使用 Modernizr 将 CSS 类 webp 或 no-webp 自动添加到 html 元素。然后，您可以设置元素的样式，例如 .webp <my-element-selector> { ... url for webp } 和 .no-webp <my-element-selector> { ... url for png/jpg }。

标签： css image background-image inline webp

【解决方案1】：

如果您不想使用 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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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');">

【讨论】：

感谢您的回答，但现在我收到了 404 响应。
您是否正确替换了路径？如果没有，你可以试试这个：<section class="sec-bg" style="background-image: url('img/awesomeWebPImage.webp'), url('img/creakyOldJPEG.jpg');">
在 Chrome 上测试我发现它加载了两个图像，违背了使用 webp 的目的。