伪元素::before/::after承载图片详情层最轻量，但存在背景图不缩放、无鼠标事件、无透明度过渡等硬限制；须设content: ""、display: block及宽高，父容器需position: relative，:hover应作用于父容器，并注意高DPI适配与无障碍需求。
hover 时用 ::before 或 ::after 显示图片详情层
直接用伪元素承载详情内容最轻量，但背景图不能自动缩放、无法响应鼠标事件、不支持透明度过渡——这些是硬限制。
常见错误是写成 ::before { background: url(...) } 后发现图不显示，其实缺了 content: "" 和尺寸控制。
-
content: ""必须显式声明，否则伪元素不渲染 - 伪元素默认 inline，得加
display: block+width/height才能撑开背景图 - 背景图推荐用
background-size: cover，避免拉伸变形；若需居中文字，得额外用position: absolute叠加真实子元素 - 过渡动画只能作用于
opacity或transform，background-image本身不能渐变
图片容器必须设 position: relative
伪元素的 position: absolute 是相对于最近的定位祖先计算的。如果父容器没设 position，悬停层会脱出图片区域，飘到页面左上角。
- 漏掉这句是调试时最常遇到的“层不见了”原因
- 不要用
position: static（默认值）凑数，它不算定位上下文 - 若容器本身已有
position: absolute或fixed，也满足条件，但要注意层级是否被其他z-index压住
:hover 触发范围太小，鼠标一偏就闪退
只给图片本身加 :hover，意味着悬停层出现后，只要鼠标离开
- 把
:hover写在父容器（如.card）上，让整个区域都可触发 - 给悬停层加
pointer-events: none，防止它挡住鼠标移向下方内容 - 若需悬停层内有按钮或链接，再对具体元素单独设
pointer-events: auto - 加
transition: opacity 0.2s ease-in-out能缓解闪退感，但治标不治本
背景图在高 DPI 屏幕上模糊
用普通尺寸图当 background-image，在 Retina 屏上会被放大 2×，像素变软。这不是 CSS 能解决的，得源头处理。
- 提供 2x 分辨率图，用
background-image: url(img@2x.png)+background-size控制显示大小 - 更稳妥的是用
@media (-webkit-min-device-pixel-ratio: 2)媒体查询切换背景图 - 别依赖
image-set()——Safari 以外兼容性差，且伪元素里支持不稳定 - 如果详情层内容主要是文字，优先考虑用真实 DOM 元素+
background-image，方便后续加 aria-label 或响应式调整
实际效果取决于你能否接受伪元素的表达边界：它适合静态提示、图标叠加、简单标签；一旦要交互、要语义化、要适配暗色模式，就得换真实 HTML 结构。这点容易被忽略，直到 QA 提出无障碍问题才返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
