Trasparenza CSS3 + sfumatura

286

RGBA è estremamente divertente, e così è -webkit-gradient, -moz-gradiente uh ... progid:DXImageTransform.Microsoft.gradient... sì. :)

C'è un modo per combinare i due, RGBA e gradienti, in modo che ci sia un gradiente di trasparenza alfa usando le specifiche CSS attuali / più recenti.

css gradient

— Jourkey
fonte

1

Il commento di @ geo1701 dovrebbe diventare quello accettato, poiché è più rilevante per gli standard moderni.

— Dmytro Shevchenko,

326

Sì. Puoi usare rgba nelle dichiarazioni di gradiente sia di webkit che di moz:

/* 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 )

Apparentemente puoi persino farlo in IE, usando una strana sintassi "hex hex". La prima coppia (nell'esempio 55) si riferisce al livello di opacità:

/* 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
fonte

20

Cordiali saluti, "hex hex" è solo ARGB a 32 bit invece di valori di colore RGB a 24 bit.

— Macke,

2

Vorrei che funzionassero anche in CSS standard, ma con l'alfa alla fine (sembra più naturale): #0001sarebbe un esagono corto per "nero quasi trasparente" e #ffcc00ffsarebbe lo stesso di #ffcc00"giallo mandarino completamente opaco"

— pecora volante

56

controlla anche il generatore di sfumature CSS3 su Colorzilla, che ha un sacco di belle preimpostazioni e tutte le varianti compatibili con il browser incrociato per ottenere il gradiente desiderato

— andrhamm,

quindi, l'ho verificato, funziona su tutti i principali browser ma non funziona su opera, qualche indizio?

— WhoSay:

non importa, l'ho appena trovato;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));

— WhoSayIn

101

La nuova sintassi è stata supportata per un po 'da tutti i browser moderni (a partire da Chrome 26, Opera 12.1, IE 10 e Firefox 16): http://caniuse.com/#feat=css-gradients

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

Questo rende un gradiente, a partire dal nero solido nella parte superiore, fino alla completa trasparenza nella parte inferiore.

Documentazione su MDN .

— George Filippakos
fonte

7

.. crea il nero solido nella parte superiore per

— renderlo

Presumo che questo sia un suggerimento e in realtà non funziona?

— Bart

15

Queste sono cose davvero fantastiche! Avevo bisogno praticamente dello stesso, ma con un gradiente orizzontale dal bianco al trasparente. E funziona benissimo! Ecco il mio codice:

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

— Misha
fonte

1

per riferimento, sull'implementazione Microsoft, gradientType = 1 è orizzontale, 0 è verticale.

— Brooks,

I gradienti IE7 e IE8 non specificano alcun colore alfa? Svaniscono davvero in trasparente?

— KajMagnus,

3

Ecco il mio codice:

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

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*/
}

L'ho trovato in w3schools e mi sono adattato alle mie esigenze mentre cercavo sfumature e trasparenza. Sto fornendo il link per fare riferimento a w3schools. Spero che questo aiuti se qualcuno è alla ricerca di sfumature e trasparenza.

http://www.w3schools.com/css/css3_gradients.asp

Inoltre l'ho provato in w3schools per cambiare l'opacità incollando il link per controllarlo

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Spero che sia d'aiuto.

— Sagar Buddha
fonte

1

Quello che segue è quello che sto usando per generare un gradiente verticale da completamente opaco (in alto) al 20% in trasparenza (in basso) per lo stesso colore:

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
fonte

0

Mi sono appena imbattuto in questo esempio più recente. Per semplificare e utilizzare gli esempi più recenti, fornendo al css una classe di selezione di 'grad', (ho incluso la compatibilità con le versioni precedenti)

.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 */
}

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

— davidrynn
fonte