更改背景图像不透明度css而不更改其中的文本不透明度

Question

我有一个div，它有一个背景图像集。这个div中也有一些文字。

我希望

始终具有完全不透明度。鼠标悬停在背景图像上时，必须从0.5变为1不透明度。

＆＃13;

＆＃13;

 #cover {
   background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
   width: 100%;
   height: 100%;
   filter: alpha(opacity=40);
   opacity: 0.5;
 }
 #cover:hover {
   opacity: 1;
 }

＆＃13;

<div class="col-12" id="cover">
  <h2>ABC</h2>
  <p>WELCOME USER</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在div中使用div来提供背景：

http://jsfiddle.net/0mgrt069/9/（刚刚修正了错字）

<div class="col-12">
    <div class="background"></div>
    <h2>ABC</h2><p>WELCOME USER</p>
</div>

和CSS：

.background{
    background:url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .4;
    width: 300px;
    height: 200px;

}
.background:hover{
   opacity:1;
}

Answer 2

为什么不考虑使用伪元素，而不是添加额外的元素？然后你可以改变＆＃39;悬停时的背景不透明度：

类似的东西：

 #cover:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
  opacity: 0.5;
  z-index:-2;
}

同时让#cover拥有position: relative。

现场演示

＆＃13;

＆＃13;

#cover {
  position: relative;
  background: width: 100%;
  height: 100%;
}
#cover:hover:after {
  opacity:1;
}
#cover:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
  opacity: 0.5;
  z-index:-2;
}

＆＃13;

<div class="col-12" id="cover">
  <h2>ABC</h2>
  <p>WELCOME USER</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个小提琴。将文本的不透明度设置为图像的原始不透明度，或根据文本的不透明度值的要求。 http://jsfiddle.net/pradyumnaswain/Lpmkq6of/

＆＃13;

＆＃13;

#cover {
  background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
  width: 100%;
  height: 100%;
  filter: alpha(opacity=40);
  opacity: 0.5;
}
#cover:hover {
  opacity: 1;
}
h2 {
  opacity: 0.5
}
p {
  opacity: 0.5
}

＆＃13;

<div class="col-12" id="cover">
  <h2>ABC</h2>
  <p>WELCOME USER</p>
</div>

＆＃13;

＆＃13;

＆＃13;