在 css 中的圖像上覆蓋字體真棒圖標

Question

我試圖在圖像上覆蓋一個很棒的字體圖標，但是圖像是可見的，而圖標是不可見的。

<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;
}

Answer 1

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

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

Answer 2

你沒有提到父 position。 將兩者包裝在任何塊標簽內，如 div、section 並相對於該塊級標簽分配樣式 position。

<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;
}