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
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.
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.
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.
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/
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With