div中的文本颜色与滤镜亮度背景

Question

我有孩子div文本问题。 这是代码。

<div style="background-image:url(http://imgnews.naver.net/image/001/2014/07/01/PAP20140701204901034_P2_99_20140701204206.jpg); background-repeat:no-repeat; background-size:    cover; filter:brightness(0.7); -webkit-filter:brightness(0.7);">

     <div>
         <h2>this is text.</h2>                      
     </div>

</div>

这是带滤镜的代码输出图像：亮度。

但我想要这个。

我该如何解决这个问题？

如何使用filter：brightness？

将childnode文本设为白色

Answer 1

看起来filter影响到所有后代，我们甚至无法覆盖子元素（h2）中的该属性。因此，我们通过在伪元素中渲染背景来解决此问题。这样filter就不会影响div的所有后代：

<强> HTML ：

<div class='container'>
   <div>
     <h2>this is text.</h2>                      
   </div>
</div>

<强> CSS ：

div > h2 {
  color:white;    
}
div.container {
  height:200px;
  position:relative;
}
div.container:before {
  content:'';
  position:absolute;
  background-image:url(http://imgnews.naver.net/image/001/2014/07/01/PAP20140701204901034_P2_99_20140701204206.jpg); 
  background-repeat:no-repeat; 
  background-size: cover; 
  filter:brightness(0.7); 
  -webkit-filter:brightness(0.7);    
  left:0;top:0;bottom:0;right:0; 
  z-index:-1;
}

Demo

Answer 2

使用css“rgba”作为彩色背景或使用以下代码作为图像背景

<div>
     <div>
         <h2>this is text.</h2>                      
     </div>

</div>


div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
  text-shadow: -2px -1px 8px rgba(255, 255, 255, 1);
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}