Crossbrowser brightness filter over img using css

Question

I need to use a full size picture as background and I need that picture to have a brightness filter.

Right now it is only working on Chrome and Firefox, the last one using svg.

This is what I have:

img.fullscreenIMG 
{
   display:block;
   position:absolute;
   z-index:1;
   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='bright30'><feComponentTransfer><feFuncR type='linear' slope='0.30'/><feFuncG type='linear' slope='0.30' /><feFuncB type='linear' slope='0.30' /></feComponentTransfer></filter></svg>#bright30");
   filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
    -moz-filter: brightness(0.6);
    -o-filter: brightness(0.6);
    -ms-filter: brightness(0.6);
}

Safari 5.1.7 for Windows doesn't work with this, neither Internet Explorer 11.

What am I missing? Can you recommend me any other way to accomplish the same?

Thanks

Solution 1

You can use a pseudo overlay with rgba() or hsla() color. This works in all browsers, for IE8 you can use -ms-filter.

body {
    width: 100%; height: 100%;    
    background: url(#bgimage) no-repeat center top/cover fixed;
}
body:before {
    position: absolute; 
    z-index: 2;
    display: block; 
    content: "";
    top: 0; right: 0; bottom: 0; left: 0;  
    background: hsla(0,0%,0%,0.5);          /*adjust brightness here */
}

http://jsfiddle.net/F79H8/

Solution 2

I also ran into the same problem. Results of the investigation, found the code for IE11.

<svg id="mySvg">
  <defs>
    <filter id="reduce">
      <feComponentTransfer>
        <feFuncR type="linear" slope="0.5"/>
        <feFuncG type="linear" slope="0.5"/>
        <feFuncB type="linear" slope="0.5"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <image filter="url(#reduce)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="test.png" width="800" height="600"/>
</svg>

Comments

[joalcego]

I think this is a good solution, it works for me in all common browsers. I just would change the last css line to 'background: rgba(0,0,0,0.5);' .

[Andrew K]

It doesn't work if you apply this trick to an img tag, as an img can't have :before or :after (lildude.co.uk/after-css-property-for-img-tag).