Question

我遇到了-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过滤器（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中

2 个答案: