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

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

运行下面的示例，将鼠标悬停在图像上并自行检查。不透明效果就在图像中，为什么要让我的白星消失

图{
位置：相对位置；
边框：薄#C0实心；
显示器：flex；
柔性流动：柱；
填充物：5px；
最大宽度：220px；
保证金：自动；
}
偶像明星{
位置：绝对位置；
字体大小：50px；
颜色：白色；
}
img{
最大宽度：220px；
最大高度：150像素；
}
img：悬停{
不透明度：.7；
}
菲卡普顿{
背景色：#222；
颜色：#fff；
字体：斜体小号无衬线；
填充：3倍；
文本对齐：居中；
}

将z-index添加到star，它应该可以工作


图{
位置：相对位置；
边框：薄#C0实心；
显示器：flex；
柔性流动：柱；
填充物：5px；
最大宽度：220px；
保证金：自动；
}
偶像明星{
位置：绝对位置；
字体大小：50px；
颜色：白色；
z指数：1；
}
img{
最大宽度：220px；
最大高度：150像素；
}
img：悬停{
不透明度：.7；
}
菲卡普顿{
背景色：#222；
颜色：#fff；
字体：斜体小号无衬线；
填充：3倍；
文本对齐：居中；
}

将z-index添加到star，它应该可以工作


图{
位置：相对位置；
边框：薄#C0实心；
显示器：flex；
柔性流动：柱；
填充物：5px；
最大宽度：220px；
保证金：自动；
}
偶像明星{
位置：绝对位置；
字体大小：50px；
颜色：白色；
z指数：1；
}
img{
最大宽度：220px；
最大高度：150像素；
}
img：悬停{
不透明度：.7；
}
菲卡普顿{
背景色：#222；
颜色：#fff；
字体：斜体小号无衬线；
填充：3倍；
文本对齐：居中；
}

如果你想改变图像的不透明度，即使星星是悬停的，你也可以这样做：
icon-star:hover+img{opacity:.7；}
非常感谢你！但是，如果我的
位于我的
上方，为什么我需要在CSS中使用
z-index:1
？@Chumpocomon它与绝对位置无关，如果您的图标位于另一个图像上方，则无关紧要。未显示的原因是值小于1的
opacity
属性导致堆叠上下文。堆叠上下文会影响z索引。由于您没有手动指定z索引，因此它们是自动分配的，并且img的值比icon star的值高，因为它在标记中出现得晚。如果你想改变图像的不透明度，即使星星是悬停的，你也可以这样做：
icon-star:hover+img{opacity:.7；}
非常感谢你！但是，如果我的
位于我的
上方，为什么我需要在CSS中使用
z-index:1
？@Chumpocomon它与绝对位置无关，如果您的图标位于另一个图像上方，则无关紧要。未显示的原因是值小于1的
opacity
属性导致堆叠上下文。堆叠上下文会影响z索引。由于您没有手动指定z索引，因此它们是自动分配的，并且img的值比icon star的值高，因为它在标记中出现得晚。