CSS3-Transparenz + Farbverlauf

286

RGBA macht extrem viel Spaß, und so ist es -webkit-gradientauch -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?

css gradient

— Jourkey
quelle

1

Der Kommentar von @ geo1701 sollte akzeptiert werden, da er für die modernen Standards relevanter ist.

— Dmytro Shevchenko

326

Ja. Sie können rgba sowohl in Webkit- als auch in Moz-Gradientendeklarationen verwenden:

/* webkit example */
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)
);

( src )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

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

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

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

( src )

— Owen
quelle

20

Zu Ihrer Information, "erweitertes Hex" ist nur 32-Bit-ARGB anstelle von 24-Bit-RGB-Farbwerten.

— Macke

2

Ich möchte, dass diese auch in Standard-CSS funktionieren, aber mit dem Alpha am Ende (scheint natürlicher zu sein): #0001wäre kurzes Hex für „fast transparentes Schwarz“ und #ffcc00ffwäre dasselbe wie #ffcc00„völlig undurchsichtiges Mandarinengelb“.

— fliegende Schafe

56

Schauen Sie sich auch den CSS3-Verlaufsgenerator bei Colorzilla an, der eine Reihe netter Voreinstellungen und alle browserübergreifenden kompatiblen Variationen enthält, um den gewünschten Verlauf zu erzielen

— andrhamm

Also, ich habe es ausgecheckt, funktioniert in allen gängigen Browsern, aber es funktioniert nicht in der Oper, gibt es einen Hinweis?

— WhoSayIn

egal, ich habe es gerade gefunden;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));

— WhoSayIn

101

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

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

Dadurch wird ein Farbverlauf von festem Schwarz oben bis vollständig transparent unten dargestellt.

Dokumentation zu MDN .

— George Filippakos
quelle

7

.. erzeugt festes Schwarz oben bis vollständig transparent unten

— Commonpike

Ich nehme an, das ist ein Vorschlag und funktioniert nicht wirklich?

— Bart

15

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:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

— Mischa
quelle

1

Als Referenz ist in der Microsoft-Implementierung gradientType = 1 horizontal und 0 vertikal.

— Brooks

Die IE7- und IE8-Verläufe geben keine Alpha-Farbe an? Verblassen sie wirklich zu transparent?

— KajMagnus

3

Hier ist mein Code:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

— Miloš Miljković
quelle

3

#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

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.

— Sagar Buddha
quelle

1

Das Folgende ist das, mit dem ich einen vertikalen Farbverlauf von vollständig undurchsichtig (oben) bis 20% Transparenz (unten) für dieselbe Farbe generiere :

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

— Riccardo Volpe
quelle

0

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

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

von https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

— Davidrynn
quelle