Trasparenza CSS3 + Gradiente

RGBA è estremamente divertente, così come -webkit-gradient , -moz-gradient e 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 attuali / ultime specifiche CSS.

Sì. Puoi usare rgba in entrambe le dichiarazioni del gradiente webkit e 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 farlo anche in IE, usando una syntax dispari “hex estesa”. 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 )

La nuova syntax è 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)); 

Ciò rende un gradiente, a partire dal nero solido in alto, fino alla completa trasparenza nella parte inferiore.

Documentazione su MDN .

Questa è roba davvero fantastica! Avevo bisogno praticamente dello stesso, ma con un gradiente orizzontale da bianco a trasparente. E sta funzionando bene! 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 ); } 

Uso http://enjoycss.com per generare qualsiasi tipo di sfumature semplici e complesse che hanno molti pattern sfumati nella galleria inserisci la descrizione dell'immagine qui

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

Ho trovato questo in w3schools e adatto alle mie esigenze mentre stavo cercando gradiente e trasparenza. Sto fornendo il link per riferirsi a w3schools. Spero che questo aiuti se qualcuno sta cercando gradiente e trasparenza.

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

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

Ho appena trovato questo esempio più recente. Per semplificare e utilizzare gli esempi più recenti, dando al css una class di selezione di “grad”, (ho incluso la retrocompatibilità)

 .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