有一种替代的源标签可以使用CSS属性背景图像根据屏幕大小传递媒体

Question

我想为我的网站提供尽可能明亮的图像。为了实现这一点，通常使用具有HTML代码的源代码：

<picture>
<source
srcset="assets/images/compressed/litopia-s4-256.avif"
media="(max-width: 512px)"
type="image/avif"
/>
<source
srcset="assets/images/compressed/litopia-s4-512.avif"
media="(max-width: 1024px)"
type="image/avif"
/>
<source
srcset="assets/images/compressed/litopia-s4-1024.avif"
media="(max-width: 2048px)"
type="image/avif"
/>
<!-- webp -->
<source
srcset="assets/images/compressed/litopia-s4-256.webp"
media="(max-width: 512px)"
type="image/webp"
/>
<source
srcset="assets/images/compressed/litopia-s4-512.webp"
media="(max-width: 1024px)"
type="image/webp"
/>
<source
srcset="assets/images/compressed/litopia-s4-1024.webp"
media="(max-width: 2048px)"
type="image/webp"
/>
<!-- jpeg -->
<source
srcset="assets/images/compressed/litopia-s4-256.jpg"
media="(max-width: 512px)"
type="image/jpeg"
/>
<source
srcset="assets/images/compressed/litopia-s4-512.jpg"
media="(max-width: 1024px)"
type="image/jpeg"
/>
<source
srcset="assets/images/compressed/litopia-s4-1024.jpg"
media="(max-width: 2048px)"
type="image/jpeg"
/>
<img src="/assets/images/litopia-port-s4.png" alt="Litopia Season 4">
</picture>

当我打算在CSS 中使用background-image交付图像时，我想知道是否有类似的东西

像这样：

.bg-img{
background-image: url("/assets/images/litopia-s4.png");
background-size:cover;
}

Answer 1

媒体查询绝对可以做到这一点：

@media (max-width: 1024px) {
.bg-img{
background-image: url("/assets/images/litopia-s4-512.png");
background-size:cover;
}
}
@media (max-width: 512px) {
.bg-img{
background-image: url("/assets/images/litopia-s4-256.png");
background-size:cover;
}
}

注意媒体查询的顺序：这很重要。(从最高分辨率到最低分辨率(

编辑

在发布之前没有看到@Kaiido的评论。但是，是的，为了检查你的媒体格式是否正确，我认为Modernizr将是一种选择。