CSS image-set() 响应式图片

image-set()函数：根据DPR选择图片(css image-set(url@1x,url@2x))、与type()配合格式选择WebP/AVIF、与background-image配合、比HTML srcset更适合CSS背景 · 难度：入门 · +10XP

CSS image-set() —— 根据屏幕分辨率自动选择图片

在Retina高分辨率屏幕上，普通分辨率的图片会显得模糊。image-set()让浏览器根据屏幕的像素密度自动选择合适清晰度的图片。

基本用法

.hero-banner {
  background-image: image-set(
    url("hero@1x.jpg") 1x,   /* 普通屏幕用标清版 */
    url("hero@2x.jpg") 2x,   /* Retina屏用高清版 */
    url("hero@3x.jpg") 3x    /* 超高清屏用更高清版 */
  );
}

浏览器会自动判断当前屏幕的像素密度，加载对应版本的图片。比用@media查询加不同图片更简洁。

动手练习

1. 基础练习：准备1x和2x两张不同分辨率的Logo图片，用image-set让不同屏幕自动加载。
2. 进阶应用：结合image-set和type()同时支持WebP格式的图片。
3. 项目实战：给网站的背景图和Logo用image-set适配高清屏幕，提升视觉品质。