如何更改不透明度而不影响其他HTML元素? [重复]

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

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

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>
评论
佑佴玎
佑佴玎

向星标添加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>
点赞
评论