我需要使用全尺寸图片作为背景,并且我需要该图片具有亮度过滤器。
目前它只适用于 Chrome
和 Firefox
,最后一个使用 svg。
这是我的:
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);
}
Windows
的 Safari 5.1.7 不适用于此,Internet Explorer 11 也是如此。
我错过了什么?你能推荐我任何其他方法来完成同样的事情吗?
谢谢
最佳答案
您可以使用带有 rgba() 或 hsla() 颜色的伪叠加层。这works在所有浏览器中,对于 IE8,您可以使用 -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 */
}
关于html - 使用css对图像进行跨浏览器亮度过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23276405/