响应式图片使用指南(Part4)
前面我们花了较多的篇幅围绕着 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>
一样,根据用户环境来提供不同的图片。
![大漠](https://res.fequan.com/upload_file/avatar_image/202404/100131_e26031.jpg)