如何在不影响其他 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>

如何在不影响其他 HTML 元素的情况下更改不透明度？

How can I change opacity without affecting other HTML elements?

html

css

opacity