如何更改不透明度而不影响其他HTML元素？

Question

我有一颗白星和一张图片。每次将图像悬停时，我都会更改不透明度，但是我不明白为什么我的星星会消失。

运行下面的示例，将鼠标悬停在图像上，然后进行检查。不透明效果只是在图像中，为什么让我的白星消失了？

figure {
    position: relative;
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}

icon-star {
  position: absolute;
  font-size: 50px;
  color: white;
}

img {
    max-width: 220px;
    max-height: 150px;
}

img:hover {
  opacity: .7;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}

<figure>
    <icon-star>🟊</icon-star>
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

Answer 1

向星标添加z-index，它应该可以工作。

figure {
    position: relative;
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}

icon-star {
  position: absolute;
  font-size: 50px;
  color: white;
  z-index: 1;
}

img {
    max-width: 220px;
    max-height: 150px;
}

img:hover {
  opacity: .7;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}

<figure>
    <icon-star>🟊</icon-star>
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>