时间戳

首页 > 解决方案 > 如何将 webp 图像添加为具有回退到 Jpeg 的 div 的背景图像

typo3 - 如何将 webp 图像添加为具有回退到 Jpeg 的 div 的背景图像

问题描述

我想将背景图像添加到 webp 格式的 div 并回退到 jpg。

如果是img标签，我们可以这样称呼：

 <picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

以及我们能做些什么以防万一<div class="carousel-item active" style="background-image: url('images/image.jpeg')">

感谢您的任何帮助！

标签： typo3webp

解决方案

这是我的解决方案...您使用隐藏的图片元素加载图像并使用 js 获取加载的图像（回退到 jpg 或 png）。最后，将加载的图像设置为 jquery 作为父 div 的背景。也许该领域有更好的解决方案。

function makeBgImage( img ){
    let srcImage;
    if ( typeof img.currentSrc === "undefined" ){
        //Old browser
        srcImage = img.src;
    }else{
        //Modern browser
        srcImage = img.currentSrc;
    }
    let ref = $(img).parents('div:first');
    ref.css('background', 'url(' + srcImage + ')');
    if( ref.hasClass('contain') ){
        ref.css('background-size', 'contain');
    }else{
        ref.css('background-size', 'cover');
    }
    ref.css('background-position', 'center');
    ref.css('background-repeat', 'no-repeat');
}
.hidden{display: none;}
.img-container{
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container">
  <picture class="hidden">
    <source srcset="image.webp" type="image/webp">
    <img onload="makeBgImage(this)" alt="Image" src="image.png">
  </picture>
</div>

推荐阅读