HTML表格利用CSS Image-set为不同分辨率提供单元格图标-html教程-PHP中文网

image-set() 不能用于表格单元格图标适配，因其仅支持 background-image 且存在浏览器兼容、构建工具不识别、路径错误、尺寸错位等问题；推荐优先使用内联 svg，次选 img+srcset，或用媒体查询替代 image-set()。

html表格利用css image-set为不同分辨率提供单元格图标

image-set() 不能用于 HTML 表格单元格（<td> 或 <code><th>）内的图标适配——它只支持 <code>background-image，且不适用于内联元素或需要语义化、可访问性、SEO 的图标场景。

你真正想做的，大概率是：在表格里显示清晰的「状态图标」（如 ✅、⚠️、❌），或自定义 PNG/SVG 图标，在 Retina 屏下不模糊。但直接套 image-set() 到 <td> 上，既语法错误，也毫无效果。<hr> <h3> <code>background-image 在 <td> 中用 <code>image-set() 为什么失败

image-set() 只能作为 background-image 的值，但它本身不是独立属性，必须配合合法 CSS 声明；
表格单元格默认是 display: table-cell，可以设 background-image，但：
- 若你写成：td.icon { background-image: image-set(url("ok.png") 1x, url("ok@2x.png") 2x); }
  → Firefox（v128）直接跳过整行，背景空白；Safari ≤15.3 漏写 1x 就静默丢弃；Chrome 若路径没引号（如 url(ok@2x.png)）也会整条忽略；
- 更常见的是：构建工具（Vite/Webpack）根本不会扫描 image-set() 里的 url()，ok@2x.png 没打进 dist/，运行时 404，高分屏 fallback 失败；
- 单元格若设置了 padding、line-height 或文字内容，background-image 容易被遮挡或尺寸错位，background-size: contain 和 background-position: center 得手动调，稍不注意就偏移。

表格图标该用什么方案？优先级从高到低

用 SVG 内联（最推荐）
直接把 SVG 放进 <td> 里，天然矢量、无缩放模糊、支持伪类和颜色控制：<pre class="brush:php;toolbar:false;"><td><svg width="16" height="16" viewbox="0 0 16 16"><path fill="currentColor" d="M..."></path></svg></td></pre> 配合 <code>td svg { display: block; margin: 0 auto; } 就能居中；颜色用 color 控制，不用管 DPR。
用 <img> + srcset（次选）
语义清晰、浏览器原生支持、构建工具自动处理资源：
```
<td>@@##@@</td>
```
注意：必须带 width/height 属性防止布局抖动；alt 不可省，否则屏幕阅读器无法识别状态。
真要用 CSS 背景图？那就放弃 image-set()，改用媒体查询
简单可靠，兼容性拉满，且能同时响应宽度和 DPR：
```
td.icon-ok { background-image: url("ok-16.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
td.icon-ok { background-image: url("ok-32.png"); background-size: 16px 16px; }
}
```
这样连 IE11 都能跑，也不依赖 @supports 的虚假检测。

容易被忽略的细节

表格单元格的 background-image 默认平铺（background-repeat: repeat），漏设 no-repeat 会导致图标重复出现；
background-position 在不同 padding 下表现不一致，建议统一用 background-position: center + background-origin: padding-box；
如果图标需点击交互，background-image 方案无法绑定事件或聚焦，必须用 <img src="ok-16.png" srcset="ok-16.png 1x, ok-32.png 2x" style="max-width:90%" style="max-width:90%" alt="success"> 或 SVG；
所有方案都要求图标物理尺寸匹配 CSS 声明：若写 width: 16px，@2x 图就得是 32×32px，否则 background-size: 16px 16px 会拉伸模糊。