CSS实现图片右上角角标效果_利用绝对定位与伪元素-css教程-PHP中文网

用 ::after 更轻量且语义干净，但仅限纯装饰角标；需交互或可访问性时必须用 span；定位前须包裹 img 的父容器设 position: relative；::after 必须设 content: ""；推荐用 transform 锚定再微调；深色模式用 prefers-color-scheme 媒体查询配合 CSS 变量；Safari 飘移应设 font-size: 0 或 display: block 消除行内干扰。

css实现图片右上角角标效果_利用绝对定位与伪元素

图片右上角角标用 `::after` 还是单独加 `span`？

用伪元素 ::after 更轻量、语义更干净，前提是角标纯装饰（如“NEW”“Hot”），不承载交互或可访问性需求。如果角标要支持点击、焦点导航、屏幕阅读器朗读，必须用真实元素（比如 span 包裹文字并加 aria-label）。

常见错误是给 img 直接设 position: relative 后挂 ::after，但忘了 img 是替换元素，默认 display: inline，导致定位基准错乱：

img 外层必须套一层 div 或 figure 并设 position: relative
避免对 img 自身设 position: relative —— 部分浏览器下会破坏垂直对齐或触发意外布局
伪元素默认不渲染，必须有 content: ""（哪怕为空）

`top` 和 `right` 设多少才不贴边又不溢出？

硬写 px 值（比如 top: 5px; right: 5px）在响应式场景下极易错位。更稳妥的做法是结合 transform 微调，让偏移与角标尺寸解耦：

设 top: 0; right: 0; 把角标锚定到右上角顶点
用 transform: translate(50%, -50%) 将角标中心对齐顶点（适用于圆形/方形角标）
若角标是带文字的矩形，改用 transform: translateX(50%) translateY(-100%)，让顶部边缘对齐
注意：父容器不能有 overflow: hidden，否则 transform 移出的部分会被裁掉

角标背景色和文字怎么适配深色模式？

直接写死 background-color: #f00 在深色背景下会糊成一片。优先用 CSS 自定义属性 + @media (prefers-color-scheme) 控制：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

img-wrapper {
  --badge-bg: #ff4757;
  --badge-text: #fff;
}
@media (prefers-color-scheme: dark) {
  img-wrapper {
    --badge-bg: #ff6b6b;
    --badge-text: #000;
  }
}
img-wrapper::after {
  background-color: var(--badge-bg);
  color: var(--badge-text);
}

别依赖 color-scheme: light dark —— 它只影响表单控件，对自定义角标无效。也别用 JS 检测深色模式再切 class，CSS 原生媒体查询更可靠、无闪屏。