CSS问题：电话图标被白色背景遮挡，如何将图标置于上层？

你的问题出在把背景色直接应用在了<img>元素本身，导致背景和图标处于同一个元素层级，无法实现“图标在上、背景边框在下”的视觉层级。

错误原因分析 #

<img>元素的background-color是作为图片的底层背景存在的，如果你的图标是透明底，背景色会填充图片周围；如果图标本身是浅色，就会和白色背景混在一起，看起来像是被遮挡。而且所有样式都堆在img上，没法区分层级。另外，<img>是自闭合标签，不需要写</img>，这属于冗余写法。

修正步骤 #

1. 调整HTML结构：用一个容器包裹图标，让容器承载背景和边框，图标作为子元素自然处于上层

<div class="phone-icon-wrap">
  <img class="phone-icon" alt="Phone number" src="images/phone.png">
</div>
<span class="phone-number">+00 12 34 56 789</span>

2. 拆分CSS样式：把背景、内边距、圆角这些样式移到容器上，图标只负责尺寸和对齐

/* 容器样式：承载背景、边框、间距 */
.phone-icon-wrap {
  background-color: white;
  border-radius: 15%;
  padding: 8px;
  margin-right: 3px;
  display: inline-block; /* 确保容器和行内元素对齐 */
  vertical-align: middle;
  /* 如果需要边框，直接在这里添加：border: 1px solid #ddd; */
}

/* 图标样式：仅控制尺寸和对齐 */
.phone-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

这样调整后，图标（<img>）会自然位于容器的背景和边框上方，完全符合你想要的层级顺序。

内容的提问来源于stack exchange，提问作者Nałęcz