响应式图片使用指南(Part4)

作者：大漠 日期：2021-12-19 点击：481
CSS
Responsive
srcset
image-set
picture
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

前面我们花了较多的篇幅围绕着 HTML 的 <img> 和 <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcset 和 sizes 属性大不同环境下提供不同尺寸的图片；在 <picture> 中使用 <source> ，并且结合media、srcset、sizes和type等属性可以为用户提供不同图片（环境不同提供不同的图片）和不同类型图片（type指定图片类型）等。但在 Web 开发中，很多时候还会使用背景图片（background-image）、边框图片（border-image）和蒙板图片（mask-image）等。

我们接下来围绕着 CSS 中的背景图片（background-image）来展开，换句话说，在background-image中是否也可以像 <img> 和 <picture> 一样，根据用户环境来提供不同的图片。

使用媒体查询加载不同的背景图片

我想大家首先想到的是 CSS 媒体查询。比如：

/* 默认的非 Retina 屏幕 */
.hero { 
    background-image: url("/hero970.jpg"); 
}

@media only screen and (max-width: 320px) {
    /* 小屏幕且非 Retina 屏幕 */
    .hero { 
        background-image: url("/hero290.jpg"); 
    }
}
@media  only screen and (min-resolution: 2dppx) and (max-width: 320px) {
    /* 小的 Retina 屏幕 */
    .hero { 
        background-image: url("/hero290@2x.jpg"); 
    }
}
@media only screen and (min-width: 321px) and (max-width: 538px) {
    /* 中等屏幕且非 Retina 屏幕 */
    .hero { 
        background-image: url("/hero538.jpg"); 
    }
}
@media only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
    /* 中等屏幕且Retina屏幕 */
    .hero { 
        background-image: url("/hero538@2x.jpg"); 
    }
}
@media only screen and (min-resolution: 2dppx) and (min-width: 539px) {
    /* 大屏幕且Retina屏幕 */
    .hero { 
        background-image: url("/hero970@2x.jpg"); 
    }
}

除了根据媒体查询断点和设备DPR给background-image设置不同的图片源之外，也可以根据用户偏好的查询来加载不同的背景图片，比如：

.hero {
    background-image: url(./hero-light.png);
}

@media (prefers-color-scheme: dark) { 
    .hero {
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/html5/srcset-and-sizes-for-img-and-picture-element-part4.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部