答案：CSS引入图片需注意路径正确性、格式兼容性、性能优化与响应式适配。相对路径以CSS文件为基准，推荐使用绝对路径或构建工具别名；优先选用WebP并提供降级方案；通过雪碧图、base64或懒加载减少请求；结合background-size和媒体查询适配多端显示，确保加载效率与视觉效果平衡。
在CSS中引入图片资源看似简单，但实际开发中需要注意多个方面，以确保页面加载性能、兼容性和可维护性。以下是关键注意事项：
1. 路径问题：相对路径与绝对路径
使用 background-image 或 content 等属性引入图片时，路径必须正确解析。
- 相对路径是相对于CSS文件的位置，而不是HTML文件。例如，CSS文件在 /css/style.css，图片在 /images/logo.png，应写为 ../images/logo.png。
- 使用绝对路径（如 /images/logo.png）可以避免层级混乱，前提是项目部署结构清晰。
- 在现代构建工具（如Webpack）中，推荐使用别名或模块化引入方式处理路径。
2. 图片格式选择与兼容性
不同浏览器对图片格式的支持程度不同，需根据场景选择合适格式。
- PNG 适合透明图和小图标，但文件较大。
- JPG 适合照片类图像，不支持透明。
- WebP 提供更优压缩率，但旧版浏览器可能不支持，建议提供降级方案。
- 使用 @supports 可做条件加载，例如：
@supports (background-image: url("test.webp")) { .banner { background-image: url("image.webp"); } }
3. 性能优化：避免阻塞与减少请求
CSS中的图片资源会影响页面渲染性能。
立即学习“前端免费学习笔记（深入）”；
- 大图尽量不用作背景图，尤其是首屏内容，会延迟渲染。
- 使用雪碧图（Sprite）合并小图标，减少HTTP请求数。
- 考虑使用 base64 编码小图嵌入CSS，减少请求，但会增加CSS体积，慎用于大图。
- 懒加载背景图可通过JavaScript动态添加，避免初始加载负担。
4. 响应式与设备适配
不同设备的分辨率和像素密度差异大，需适配多端显示效果。
- 使用 background-size 控制图片缩放，常用值有 cover、contain 或具体尺寸。
- 针对高DPI屏幕（Retina），可准备2x或3x图，通过媒体查询切换：
@media (-webkit-min-device-pixel-ratio: 2) { .icon { background-image: url("icon@2x.png"); } }
基本上就这些。路径准确、格式合理、关注性能和适配，才能让图片在CSS中稳定高效地呈现。
