跨瀏覽器亮度過濾器使用css的img

我需要使用全尺寸的圖片作爲背景，我需要該圖片有亮度過濾器。跨瀏覽器亮度過濾器使用css的img

現在它只在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); 
}

的Safari 5.1.7 Windows不符合這方面的工作，既不Internet Explorer 11.

我缺少什麼？你能推薦我任何其他方式來完成相同的？

感謝

來源

2014-04-24 codiaf

無論是系統的Safari 5.x也IE11支持'filter'，請參閱：http://caniuse.com/css-filters – Dai

如果重做IMG作爲聯SVG內，和SVG走一路那麼它將在IE10中工作。（Safari/Windows是一個死的產品順便說一句，它停止與版本5） –

您可以使用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 */ 
}

http://jsfiddle.net/F79H8/

來源

2014-04-29 11:28:21 Kunsang

這不是亮度，但亮度。 – igorpavlov

我認爲這是一個很好的解決方案，它適用於所有常見瀏覽器。我只是將最後一個css行改爲'background：rgba（0,0,0,0.5）;' 。 – joalcego

如果您將此技巧應用於img標記，則不起作用，因爲img不能：before或：after（https://lildude.co.uk/after-css-property-for-img-tag ）。 –

我也遇到了同樣的問題。調查結果，找到了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>

來源

2016-08-04 12:07:08 taim

跨瀏覽器亮度過濾器使用css的img

回答

相關問題