Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Crossbrowser brightness filter over img using css

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

like image 203
codiaf Avatar asked Apr 24 '14 17:04

codiaf


People also ask

How do I change the brightness of an image in CSS?

To set image brightness in CSS, use filter brightness(%). Remember, the value 0 makes the image black, 100% is for original image and default. Rest, you can set any value of your choice, but values above 100% would make the image brighter.

What is Webkit filter in CSS?

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.

Can I use CSS filter invert?

Method of applying filter effects using the filter property to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.


2 Answers

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/

like image 62
Kunsang Avatar answered Sep 30 '22 11:09

Kunsang


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>
like image 36
taim Avatar answered Sep 30 '22 13:09

taim