在css中的图像上覆盖一个很棒的字体图标答案

【问题标题】：Overlaying a font-awesome icon on an image in css在css中的图像上覆盖一个很棒的字体图标
【发布时间】：2021-02-10 16:04:11
【问题描述】：

我试图在图像上叠加一个字体很棒的图标，但是图像是可见的，而图标是不可见的。

<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<img src="../images/tbt.jpg"></img>

i {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 50%;
}
img {
   position: relative;
   z-index: -1;
}

【问题讨论】：

标签： html css image sass font-awesome

【解决方案1】：

您可以在样式中添加不透明度

i {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
opacity: 0;
}
img {
position: relative;
z-index: -1;
}
i:hover {
opacity: 1;
}

【讨论】：

【解决方案2】：

你没有提到父母的职位。将两者包装在任何块标签内，如 div、section 并分配相对于该块级标签的样式位置。

<div style="position:relative">
<i class="fa fa-play-circle-o" aria-hidden="true"></i>
<img src="../images/tbt.jpg"></img>
</div>
i {
   position: absolute;
   z-index: 1;
   top: 50%;
   left: 50%;
}
img {
   position: relative;
   z-index: -1;
}

【讨论】：