如何用CSS和HTML实现图片覆盖下划线？求助解决方案

以下是两种可行的HTML+CSS实现方案，适配你需要的Word式图片覆盖下划线效果：

方案一：利用文字自带下划线 #

适合快速实现的场景，直接基于文字原生下划线属性调整：

HTML结构 #

<p>普通文本内容，<span class="underline-overlay">带图片标记的文本<img alt="下划线覆盖标记" src="你的图片路径或Base64编码"></span>，继续普通文本。</p>

CSS样式 #

.underline-overlay {
  position: relative;
  text-decoration: underline solid #000 1px;
  display: inline-flex;
  align-items: center;
}

.underline-overlay img {
  position: absolute;
  bottom: -2px; /* 调整此值让图片精准覆盖下划线 */
  left: 50%; /* 可自定义位置，比如left:0实现靠左覆盖 */
  transform: translateX(-50%);
  width: 18px; /* 根据你的图片尺寸调整 */
  height: 18px;
  z-index: 1; /* 确保图片层级高于下划线 */
  background-color: #fff; /* 与页面背景色一致，避免遮挡周围下划线 */
}

方案二：伪元素自定义下划线 #

更灵活的控制方式，适合需要调整下划线样式、位置的场景：

HTML结构 #

<p>普通文本内容，<span class="custom-underline-overlay">带图片标记的文本<img alt="下划线覆盖标记" src="你的图片路径或Base64编码"></span>，继续普通文本。</p>

CSS样式 #

.custom-underline-overlay {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 用伪元素生成自定义下划线 */
.custom-underline-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 0; /* 下划线置于底层 */
}

.custom-underline-overlay img {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  z-index: 1; /* 图片置于下划线之上 */
  background-color: #fff;
}

关键说明 #

• 若使用Base64图片，直接将src替换为完整的Base64字符串即可，例如：src="data:image/png;base64,xxxxxx..."
• 调整bottom、left、width、height等值可以精准控制图片的位置和大小
• 如果图片本身是透明背景，可移除background-color属性

内容的提问来源于stack exchange，提问作者Jaka rebel