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

Question

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

背景图片class：

.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 class:

.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="">
[...]

不幸的是，"overlay-layer" 中的任何内容也会受到 webkit-filter 的影响（50% 亮度等），我无法重置它。我也试过将它设置为 100%，但它也不起作用。

Answer 1

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

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

Answer 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 也已经回答了这个问题，很遗憾，这是不可能的。

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

Can't reset -webkit-filter: in inner div

css

twitter-bootstrap-3