RGBA macht extrem viel Spaß, und so ist es -webkit-gradient
auch -moz-gradient
, und äh ... progid:DXImageTransform.Microsoft.gradient
... ja. :) :)
Gibt es eine Möglichkeit, die beiden, RGBA und Gradienten, so zu kombinieren, dass ein Gradient der Alpha-Transparenz unter Verwendung der aktuellen / neuesten CSS-Spezifikationen entsteht?
Antworten:
Ja. Sie können rgba sowohl in Webkit- als auch in Moz-Gradientendeklarationen verwenden:
( src )
( src )
Anscheinend können Sie dies sogar im IE tun, indem Sie eine ungerade "Extended Hex" -Syntax verwenden. Das erste Paar (im Beispiel 55) bezieht sich auf den Grad der Opazität:
( src )
quelle
#0001
wäre kurzes Hex für „fast transparentes Schwarz“ und#ffcc00ff
wäre dasselbe wie#ffcc00
„völlig undurchsichtiges Mandarinengelb“.background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
Neue Syntax wird seit einiger Zeit von allen modernen Browsern unterstützt (ab Chrome 26, Opera 12.1, IE 10 und Firefox 16): http://caniuse.com/#feat=css-gradients
Dadurch wird ein Farbverlauf von festem Schwarz oben bis vollständig transparent unten dargestellt.
Dokumentation zu MDN .
quelle
Das sind wirklich coole Sachen! Ich brauchte so ziemlich das Gleiche, aber mit einem horizontalen Farbverlauf von weiß nach transparent. Und es funktioniert gut! Hier ist mein Code:
quelle
Hier ist mein Code:
quelle
Ich fand dies in w3schools und passte zu meinen Bedürfnissen, während ich nach Farbverlauf und Transparenz suchte. Ich stelle den Link zur Verfügung, um auf w3schools zu verweisen. Ich hoffe, dies hilft, wenn jemand nach Farbverlauf und Transparenz sucht.
http://www.w3schools.com/css/css3_gradients.asp
Außerdem habe ich es in w3schools versucht, die Deckkraft zu ändern, indem der Link eingefügt und überprüft wurde
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans
Ich hoffe es hilft.
quelle
Das Folgende ist das, mit dem ich einen vertikalen Farbverlauf von vollständig undurchsichtig (oben) bis 20% Transparenz (unten) für dieselbe Farbe generiere :
quelle
Ich bin gerade auf dieses neuere Beispiel gestoßen. Um die neuesten Beispiele zu vereinfachen und zu verwenden, geben Sie dem CSS eine Auswahlklasse von 'grad' (ich habe die Abwärtskompatibilität aufgenommen).
von https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
quelle