如何實現跨瀏覽器不透明度漸變（不是顏色漸變）

如何實現跨瀏覽器不透明度漸變（不是顏色漸變）？請參見下面的代碼：
如何實現跨瀏覽器不透明度漸變（不是顏色漸變）

<div style="background-color:Red;display:block;height:500px;width:500px;filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500)"></div>

它工作正常，在IE瀏覽器而不是在其他瀏覽器如Firefox，safari..etc。什麼是Firefox的等效語法？請不要建議我使用漸變圖像。

來源

2010-04-16 Brij

最近的Firefox版本有-moz-linear-gradient，WebKit瀏覽器有-webkit-gradient。這兩種顏色的透明度應該可以通過使用rgba顏色來實現。

https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://developer.apple.com/safari/library/documentation/...

唯一真正的100％的跨瀏覽器兼容的解決方案是一種圖像雖然。

來源

2010-04-16 05:55:54 deceze

這個答案是不適合的問題是正確的。似乎並沒有與古代IE瀏覽器的過濾器相同：通過CSS實現mozilla或gecko的alpha開始/結束。 – PlayGod 2012-12-04 15:23:03

我一直想弄清楚如何讓圖像具有水平線性漸變不透明度，所以先前的div的垂直漸變可以透過。這是因爲在我的應用程序中，用戶將上傳需要不透明度漸變的圖像，所以解決方案必須是純css/js。 – PlayGod 2012-12-04 15:23:45

它可以與IE一起工作，但實際上不能將線性不透明漸變應用於圖像背景。當你使用rgba線性漸變時，moz和gecko實際上會創建一個圖像，並且漸變顯然只能朝一個方向進行。爲了獲得我們之後的效果，您需要爲不透明度指定一個方向漸變，併爲顏色漸變指定另一個方向漸變。 – PlayGod 2012-12-04 15:24:17

感謝@deceze，

我寫樣本的CSS有同樣的要求別人

top:0px; 
    opacity: 0.6;  
    width: 1944px; 
    height: 896px; 
    position: absolute; 
    z-index: 500; 
background-color:#dcdcdc; 
     /* For WebKit (Safari, Google Chrome etc) */ 
     background: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(rgba(215,212,207,0))); 
     /* For Mozilla/Gecko (Firefox etc) */ 
     background: -moz-linear-gradient(top, #dcdcdc, rgba(215,212,207,0)); 
     /* For Internet Explorer 5.5 - 7 */ 
     filter:alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696); 
     /* For Internet Explorer 8 */ 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70, FinishOpacity=0, Style=1, StartX=1242, StartY=0, FinishX=1242, FinishY=696)";

來源

2010-04-22 05:20:24 Brij

如何實現跨瀏覽器不透明度漸變（不是顏色漸變）

回答

相關問題