Css 子元素随父图像更改不透明度

我有一个

元素，它有一个背景图像。除此之外，我还有一些隐藏的文本，但当用户将鼠标悬停在

元素上时，文本将显示，并且

不透明度将降低。我的问题是当你把鼠标悬停在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>

这是文本

只要更改父元素的不透明度，它就会自动应用于所有子元素。解决这个问题的唯一方法是不要让不透明元素成为文本的父元素。最好将background元素重构为该容器中任何其他元素的同级元素，并给它一些

绝对的
定位。
在.pic类中的任何元素都会收到不透明度，为了不让它收到它，你必须为pic创建一个包装器，并将.textstuff放在与.pic同级的包装器中

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

尝试使用
：在
伪元素之前：

.pic{
位置：相对位置；
}
图：之前{
背景图片：url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
-webkit过渡：所有.3s易于输入输出；
-moz转换：所有.3轻松输入输出；
-o型转换：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
位置：绝对位置；
宽度：100%；
身高：100%；
内容：“；
z指数：-1；
} 
.短信{
可见性：隐藏；
}
.pic:hover.textstuff{
能见度：可见；
颜色：黑色；
}
图：悬停：在{
过滤器：α（不透明度=30）；
-moz不透明度：0.3；
-khtml不透明度：0.3；
不透明度：0.3；
}
我能够通过包装它并将.pic设置为绝对位置来实现这一点。这样，它会填充背景，但不会影响文本：

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

下面是一把小提琴，展示了一个例子：

您必须重新考虑。不透明度将更改包装的不透明度，并且任何子元素和CSS都无法更改bg图像的不透明度。可能的重复使用javascript设置MouseOver上相关子元素的不透明度，如果这是一个选项，您可以使用html吗？
.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;
}