子元素随父图像改变不透明度答案

【问题标题】：Child elements changing opacity with parent Image子元素随父图像改变不透明度
【发布时间】：2014-10-11 22:04:41
【问题描述】：

我有一个带有背景图像的<div> 元素。最重要的是，我有一些隐藏的文本，但是当用户将鼠标悬停在 <div> 元素上时，该文本将显示并且 <div> 不透明度会降低。我的问题是，当您将鼠标悬停在 div 上时，其中的所有元素也会改变不透明度。我查看了stackoverflow，看看是否有人有同样的问题，但我发现的只是RGBA使用背景颜色（不是图像）的答案。

这是我的 CSS：

    .pic{
      background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
} 
.textstuff{
    visibility:hidden;
}
.pic:hover .textstuff{
    visibility:visible;
    color:black;
}
.pic:hover{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

此处的 HTML：

    <div class="pic" style="height:150px;width:150px;">
       <div class="textstuff">this is text</div>
    </div>

【问题讨论】：

您必须重新考虑因素。 Opacity 将改变包装器的不透明度，任何子元素和 CSS 都不能改变 bg 图像的不透明度。
Set opacity of background image without affecting child elements 的可能重复项
使用javascript设置鼠标悬停相关子元素的不透明度，如果这是一个选项你可以使用
你有这个的html吗？

标签： css image hover opacity

【解决方案1】：

只要您更改父元素的不透明度，它就会自动应用于所有子元素。解决这个问题的唯一方法是不要让你的 opacified 元素成为文本的父元素。最好将背景元素重构为该容器中任何其他元素的兄弟元素，并为其提供一些 absolute 定位。

【讨论】：

【解决方案2】：

试试:before伪元素：

.pic {
    position: relative;
}

.pic:before {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
} 

.textstuff{
    visibility:hidden;
}

.pic:hover .textstuff{
    visibility:visible;
    color:black;
}

.pic:hover:before{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

【讨论】：

【解决方案3】：

我能够通过包装它并将 .pic 设置为绝对位置来完成这项工作。这样它会填满背景但不会影响文本：

<div class="wrapper">
    <div class="pic"></div>
    <div class="textstuff">
        <p>This is the textstuff</p>
    </div>
</div>

CSS 代码：

.wrapper {
    position: relative;
}

.pic {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.textstuff {
    visibility:hidden;
}
.pic:hover ~ .textstuff {
    visibility:visible;
    color:black;
}
.pic:hover {
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

这是一个显示示例的小提琴：

http://jsfiddle.net/jqxw5ajz/

【讨论】：

【解决方案4】：

.pic 类中的任何元素都会接收不透明度，为了不接收它，您必须为 pic 创建一个包装器并将 .textstuff 放入 .pic 的该包装器兄弟中

<div class="pic_wrapper">
    <div class="pic"></div>
    <div class="textstuff"></div>
</div>

【讨论】：