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

标签 css image background-image inline webp

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

最佳答案

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

关于css - 如何在section标签中设置相同图片的不同背景图片格式(png和webp),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56792199/

相关文章:

jquery - 是否可以让图像的翻转触发多个图像的不同事件状态?

css - Angular 7 - 根据条件更改 Mat-select-value 的颜色

javascript - 如何修复云上升?

css - 带有固定元素的滚动容器在固定元素上不可滚动

javascript - 当 div opacity = 1 时加载一段代码

python - 如何使用python从图像中去除盐和胡椒粉的噪声?

html5 - 具有背景图像,背景颜色和阴影的SVG元素

html - 我想要带有覆盖文字的模糊背景图像

android - 如何在android中实现图像 ScrollView ?

image - 检测图像中的乐高底板