title: Can't reset -webkit-filter: in inner div
body: <p>I am having an issue with  -webkit-filter property. I have div which displays background image and inside it another div which is containter for icon, logo and heading text. </p>
  
  <p>Background image class: </p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>Inside div class:</p>
  
  <pre><code>.overlay-layer{
      -webkit-filter: initial;
      filter: initial;  
  
  }
  </code></pre>
  
  <p>and HTML:</p>
  
  <pre><code>     &lt;header class="image-bg-fluid-height "&gt;
          &lt;div class="containter"&gt;
              &lt;div class="row"&gt;
              &lt;div class="col-sm-10 col-sm-offset-1"&gt;
                  &lt;div class="overlay-layer"&gt;
                  &lt;img class="img-responsive img-center" src="images/logo-2.png" alt=""&gt;
  [...]
  </code></pre>
  
  <p>Unfortunately whatever content is inside "overlay-layer" is also affected by webkit-filter (50% brightness etc.) and I can't reset it. I also tried set it to 100% but it also doesn't work. </p>