无法重置-webkit-filter：在内部 div答案

【问题标题】：Can't reset -webkit-filter: in inner div无法重置-webkit-filter：在内部 div
【发布时间】：2015-05-04 23:05:26
【问题描述】：

我遇到了 -webkit-filter 属性的问题。我有一个显示背景图像的 div，其中另一个 div 是图标、徽标和标题文本的容器。

背景图片类：

.image-bg-fluid-height,


.image-bg-fixed-height {

     -webkit-filter:brightness(50%);
    -moz-filter:brightness(50%);
    filter: url(#brightness); /* required for FF */
    filter:brightness(50%);
}

.image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

}

.image-bg-fluid-height {
    background: url('../images/header.png') no-repeat center center scroll;
    padding: 100px 0;
}

.image-bg-fixed-height {
    background: url('../images/header.png') no-repeat center center scroll;
    height: 80%;
}

div类内部：

.overlay-layer{
    -webkit-filter: initial;
    filter: initial;  

}

和 HTML：

     <header class="image-bg-fluid-height ">
        <div class="containter">
            <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="overlay-layer">
                <img class="img-responsive img-center" src="images/logo-2.png" alt="">
[...]

不幸的是，“覆盖层”内的任何内容也会受到 webkit-filter（50% 亮度等）的影响，我无法重置它。我也尝试将其设置为 100%，但它也不起作用。

【问题讨论】：

不幸的是，这就是它的工作方式。在另一个具有过滤器的元素中重置一个元素的过滤器不会重置父元素的过滤器。
@Rvervuurt 就在你的名字旁边——根据你的评论，几乎没有编辑和删除按钮。

标签： css twitter-bootstrap-3

【解决方案1】：

你不能。过滤选项（以及其他样式属性，例如不透明度）会影响元素和其中的所有内容。

唯一（糟糕的）选项是制作一个覆盖.image-bg-fixed-height 元素的div。

【讨论】：

任何其他想法如何创建暗淡的背景图像不影响内部 div？
您能详细介绍一下吗？当然我可以在 photoshop 中调暗文件，但我宁愿动态地做。
是的，请在此处查看演示：jsfiddle.net/ekvbmhft。您需要放置一个绝对叠加层，使其填满另一个 div。希望你能理解

【解决方案2】：

这不是原始问题的解决方案（重置 webkit-filter），但我使用以下代码解决了我的原始问题（背景图像变暗而不影响内部内容）：

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../images/header.png') no-repeat center center scroll;

Ted 也已经回答了这个问题，不幸的是这是不可能的。

【讨论】：