如何解决如何在 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 举报,一经查实,本站将立刻删除。