Können CSS3-Verläufe Alpha-Transparenz nutzen?

Kombination von CSS3-Transparenz und Farbverläufen

CSS3 bietet eine faszinierende Kombination aus RGBA- und Farbverlaufsfunktionen. Ist es möglich, diese Funktionen gemeinsam zu nutzen und Farbverläufe zu ermöglichen, die die Alpha-Transparenz basierend auf den CSS-Spezifikationen nahtlos anpassen?

Antwort:

In der Tat ist eine Integration möglich rgba sowohl in Webkit- als auch in Moz-Gradientendeklarationen integrieren. Hier ist ein Beispiel:

Webkit Gradient:

background-image: -webkit-gradient(
  linear, left top, left bottom,
  from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)),
  color-stop(.5,#333333)
);

Mozilla Gradient (Firefox 3.6):

background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%,
  rgba(255, 255, 255, 0) 95%
);

Sogar Internet Explorer bietet diese Funktion mithilfe einer einzigartigen „erweiterten Hex“-Syntax. Das erste Paar im Code stellt die Deckkraftstufe dar:

Internet Explorer-Farbverlauf:

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

Das obige ist der detaillierte Inhalt vonKönnen CSS3-Verläufe Alpha-Transparenz nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!