Question

前提：我不会使用＆＃34;位置＆＃34;绝对/相对/ z指数等因为我使用Bootstrap而且我使用的像素测量越少越好。我也看到了一些类似的问题，但我没有找到一个好的解决方案，无论是 rgba * 还是 z-index

我有2个嵌套的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继承了不透明度：0.6来自div1。

此外，我尝试使用不同的背景（包括文本），但这会导致图形伪影并且它不是最佳的。我还尝试将！important 添加到不透明度：X，但没有任何变化。

有什么建议吗？

提前致谢。

Answer 1

#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
}

Answer 2

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

<强> 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中使用不同的CSS不透明度？

2 个答案: