具有过滤器亮度背景的 div 中的文本颜色答案

【问题标题】：text color in div with filter brightness background具有过滤器亮度背景的 div 中的文本颜色
【发布时间】：2014-08-23 08:26:47
【问题描述】：

我有子 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 使子节点文本变为白色？

【问题讨论】：

quickmeme.com/img/71/…
是的。像这样。我该怎么做？？
如图添加文字阴影

标签： jquery html css filter brightness

【解决方案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.

【讨论】：

【解决方案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;   
}

【讨论】：