如何修改opacity不影响其他HTML元素？图片hover时星形图标消失问题

这个问题的根源在于**CSS的堆叠上下文（Stacking Context）**和opacity属性的一个隐藏特性，咱们一步步拆解：

先看你的代码结构（整理后） #

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

问题的核心原因 #

你以为只给img加了opacity，但实际上：

• 当元素的opacity值小于1时，该元素会自动创建一个新的堆叠上下文。
• 默认状态下，你的icon-star是绝对定位元素，它的堆叠层级比普通流的img要高，所以能显示在图片上方。
• 但当img:hover触发opacity:0.7后，img变成了一个新的堆叠上下文元素，它的堆叠层级会超过原本的绝对定位元素icon-star（CSS堆叠上下文的层级规则中，创建了堆叠上下文的元素会优先于未创建堆叠上下文的定位元素显示）。
• 最终效果就是半透明的图片盖住了白色的星形图标，看起来图标“消失”了。

解决方法 #

最简单的修复方式就是给你的星形图标设置一个更高的堆叠层级，让它始终在图片上方：

icon-star {
  position: absolute;
  font-size: 50px;
  color: white;
  z-index: 1; /* 新增这一行 */
}

另外，还有一种思路是给父元素figure创建堆叠上下文（比如设置opacity: 1、z-index: 0或者transform: translateZ(0)），这样img的堆叠上下文会被限制在figure内部，不会覆盖icon-star。不过直接给图标加z-index是最直观的方案。

内容的提问来源于stack exchange，提问作者Chumpocomon