如何在 CSS 中正确分配 .webp 图像背景？

问题描述

在 HTML 中，我知道如何使用图片标签向其中添加像 webp 这样的图像类型，以便让浏览器发挥最佳效果。如果浏览器不支持 webp，它将回退到也提供的 jpg 或 png 图像。这非常有用，因为根据介质宽度考虑了不同的分辨率（3x、2x 和 1x）。我通常这样写：

<picture>
    <source class="centro1" media="(min-width: 1700px)"
        srcset="/images/baba-4254_xlarge_3x.webp 3x,/images/baba-2836_xlarge_2x.webp 2x,/images/baba-1418_xlarge_1x.webp" />
    <source class="centro1" media="(min-width: 1000px)"
        srcset="/images/baba-3546_large_3x.webp 3x,/images/baba-2364_large_2x.webp 2x,<source class="centro1" media="(min-width: 500px)"
        srcset="/images/baba-1701_medium_3x.webp 3x,/images/baba-1134_medium_2x.webp 2x,/images/baba--567_medium_1x.webp" />
    <source class="centro1" media="(max-width: 499px)"
        srcset="/images/baba-918_small_3x.webp 3x,/images/baba-612_small_2x.webp 2x,<img class="centro1" src="/images/baba-1418_xlarge_1x.jpg" alt="xxx" title="yyy">
</picture>

我现在的问题是我想要一个类似的解决方案（3x、2x、1x），但在 CSS 中，用于用作背景的图像。

我设法写了这个：

@media only screen and (min-width: 1025) {
    .no-webp .backgrounded {
        background: url(/images/tete-1920.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (min-width: 1025px) {
        background: url(/images/tete-1920.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
        background: url(/images/tete-1024.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .webp .backgrounded {
        background: url(/images/tete-1024.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
    .no-webp .backgrounded {
        background: url(/images/tete-768.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
    .webp .backgrounded {
        background: url(/images/tete-768.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 480px) {
    .no-webp .backgrounded {
        background: url(/images/tete-480.jpg) no-repeat; background-position: top center; width: auto; height: 100%;}
}

@media only screen and (max-width: 480px) {
    .webp .backgrounded {
        background: url(/images/tete-480.webp) no-repeat; background-position: top center; width: auto; height: 100%;}
}

它的工作原理是为每个 @media 提供 .webp 和 .jpg，但不能根据分辨率为每个 @media 提供不同的 .webp 大小，以及单个 .jpg 回退。

非常感谢您的建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）