Wie Cross-Browser-Opazitätsgradienten (Nicht Color Gradient)

Wie kann ich implementieren Cross-Browser-Opazitätsgradienten (nicht Farbverlauf) implementieren? Siehe folgenden Code:
Wie Cross-Browser-Opazitätsgradienten (Nicht Color Gradient)

<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>

Es in IE funktioniert gut, aber nicht in anderen Browsern wie Firefox, safari..etc. Was ist äquivalente Syntax für Firefox? Bitte nicht vorschlagen, Gradientenbild zu verwenden.

Quelle

2010-04-16 Brij

Es gibt -moz-linear-gradient für aktuelle Firefox-Versionen und -webkit-gradient für WebKit-Browser. Transparenz für diese beiden sollte möglich sein mit rgba Farben.

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

Die einzige echte 100% Cross-Browser-kompatible Lösung ist allerdings ein Bild.

Quelle

2010-04-16 05:55:54 deceze

diese Antwort mit der Frage nicht korrekt ist. Es scheint kein Äquivalent zum Filter des alten IE zu geben: Alpha Start/Finish für Mozilla oder Gecko via CSS. – PlayGod

Ich habe versucht, herauszufinden, wie man ein Bild bekommt, das eine horizontale lineare Farbverlaufs-Opazität hat, so dass der vertikale Gradient eines vorherigen Divs durchscheinen kann. Dies liegt daran, dass der Benutzer in meiner App das Bild hochladen wird, für das der Deckkraftgradient erforderlich ist. Die Lösung muss also rein css/js lauten. – PlayGod

Es wird mit IE arbeiten, aber in der Ausbildung kann man keinen linearen Opazitätsgradienten auf einen Bildhintergrund anwenden. moz und gecko erstellen tatsächlich ein Bild, wenn Sie den linearen rgba-Farbverlauf verwenden, und der Farbverlauf kann scheinbar nur in eine Richtung gehen. Um den gewünschten Effekt zu erzielen, müssen Sie entweder einen Richtungsgradienten für die Deckkraft und einen anderen Richtungsgradienten für den Farbverlauf angeben. – PlayGod

Dank @deceze,

Ich schreibe CSS Beispiel für andere Menschen gleiche Anforderung

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)";

Quelle

2010-04-22 05:20:24 Brij

Wie Cross-Browser-Opazitätsgradienten (Nicht Color Gradient)

Antwort

Verwandte Themen