Bộ lọc độ sáng Crossbrowser qua img bằng cách sử dụng css

Question

Tôi cần sử dụng ảnh có kích thước đầy đủ làm nền và tôi cần hình ảnh đó để có bộ lọc độ sáng.

Hiện tại, tính năng này chỉ hoạt động trên Chrome và Firefox, phiên bản cuối cùng sử dụng svg.

Đây là những gì tôi có:

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 cho Windows không hoạt động với điều này, không phải Internet Explorer 11.

tôi thiếu gì? Bạn có thể giới thiệu cho tôi bất kỳ cách nào khác để thực hiện điều tương tự không?

Cảm ơn

Answer 1

Bạn có thể sử dụng lớp phủ giả với màu rgba() hoặc hsla(). Điều này works trong tất cả các trình duyệt, cho IE8 bạn có thể sử dụng -ms-bộ lọc.

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/

Answer 2

Tôi cũng chạy vào cùng một vấn đề. Kết quả điều tra, tìm thấy mã cho 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>