css3過濾器的一致渲染

我剛剛在我的網站上做了一些奇特的css3過濾器的東西，但不幸的是瀏覽器顯示完全不同的結果。css3過濾器的一致渲染

由於過濾器目前僅適用於webkit瀏覽器（source），因此目前爲止我只使用-webkit-filter進行了試驗。

問題是，Safari（在iOS上測試）將brightness(0)解釋爲默認值，brightness(1)將顯示全亮元素。 Chrome有一個默認值。

有沒有辦法爲webkit瀏覽器實現一致的亮度？

一個例子來看看這個的jsfiddle：http://jsfiddle.net/4SMDf/1/

由於提前，麥克法蘭

來源

2013-04-10 McFarlane

爲此，您可以用SVG濾鏡。

下面是一個例子：

<svg height="0" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="brightness"> 
    <feComponentTransfer> 
     <feFuncR type="linear" slope="[amount]"/> 
     <feFuncG type="linear" slope="[amount]"/> 
     <feFuncB type="linear" slope="[amount]"/> 
    </feComponentTransfer> 
    </filter> 
</svg>

結帳的亮度（量）節在這裏：https://developer.mozilla.org/en-US/docs/CSS/filter

來源

2013-04-10 07:43:51

難道還要使兩個過濾狀態之間的轉換，如果我用這個方法？ – McFarlane 2013-04-10 08:16:50

我不這麼認爲，這是一個問題嗎？ – 2013-05-01 18:23:35

您可以使用元素爲SVG過濾器值設置動畫 – 2013-10-14 16:57:31

css3過濾器的一致渲染

回答

相關問題