如何在嵌套div中使用不同的CSS不透明度？

前提：我不会使用“位置”绝对/相对/z索引等。因为我使用的是引导，我使用的像素度量越少越好。 我也看到了一些类似的问题，但我没有找到一个很好的解决方案，无论是使用rgba*还是使用z-index

我有两个嵌套的div

<div id="div1" style="background-image:url('background.png')">
    <div id="div2" style="opacity:0;">
         Some text
    </div>
</div>

一些文本

因此：我将一幅图像设置为div1的背景。在div1内部（正好在它的中间），有div2，它只包含一个文本。 开始时，图像具有完全不透明度（1.0），文本不可见（不透明度：0）

悬停时我希望图像具有不透明度：0.6，但嵌套div（文本）必须具有不透明度：1.0（完全不透明度）

我试图对2个div应用不同的不透明度，但是嵌套的div继承了div1的不透明度：0.6

此外，我尝试使用不同的背景（包括文本），但这会导致图形瑕疵，而且不是真正的最佳效果。 我还尝试添加！重要信息到不透明度：X，但没有任何更改

有什么建议吗

提前感谢。

您需要使用两个图像（一个透明，一个完全不透明度，并在悬停效果期间更改）

CSS

#div1 {
    background:img-1.png;
    text-indent:-9999px;
    overflow:hidden
}
#div1:hover {
    background:img-2.png
    text-indent:inherit /*works if you have normal text-indent on your parent element*/
}

---

谢谢你的邀请。什么是“div”（没有任何数字）？请给我解释一下密码好吗？谢谢

#div1
{

}
#div2
{
opacity:0.5;
}

#div1:hover
{
opacity:0.6;
position: relative;
}
#div:hover > :after
{
opacity: 0.5;
position: absolute;
height: ...;
width: ..;
}
#div1:hover > div1
{
position: relative;
height: ...;
width: ..;
opacity:1
}