Risposte:
Crea un png più grande di 1x1 pixel (grazie a trenta punti) e che corrisponda alla trasparenza del tuo sfondo.
EDIT: per tornare al supporto IE6 +, puoi specificare bkgd chunk per il png, questo è un colore che sostituirà la vera trasparenza alfa se non è supportata. Puoi aggiustarlo con gimp ad es.
1x1: stackoverflow.com/questions/7764751/...
per simulare lo sfondo RGBA e HSLA in IE, puoi utilizzare un filtro sfumato, con lo stesso colore iniziale e finale (il canale alfa è la prima coppia nel valore di HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */Credo che questo sia il migliore perché in questa pagina c'è uno strumento per aiutarti a generare uno sfondo trasparente alfa:
" Cross browser alpha transparent background CSS (rgba) " (* ora collegato a archive.org)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}l'immagine png trasparente non funzionerà in IE 6-, le alternative sono:
con CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}o fallo semplicemente con jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});Anche se in ritardo, ho dovuto usarlo oggi e ho trovato uno script php molto utile qui che ti consentirà di creare dinamicamente un file png, proprio come funziona rgba.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);Lo script può essere scaricato qui: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
So che potrebbe non essere la soluzione perfetta per tutti, ma in alcuni casi vale la pena prenderla in considerazione, poiché consente di risparmiare molto tempo e funziona perfettamente. Spero che aiuti qualcuno!
rgba? O viene sempre richiesto da tutti gli utenti e semplicemente non viene mostrato?
Ci sono per lo più tutti i browser che supportano il codice RGBa in CSS, ma solo IE8 e il livello inferiore non supporta il codice RGBa css. Per questo ecco la soluzione. Per la soluzione devi seguire questo codice ed è meglio seguire la sua sequenza altrimenti non otterrai un output perfetto come desideri. Questo codice è usato da me ed è per lo più perfetto. fai un commento se è perfetto.
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}Usa css per cambiare l'opacità. Per far fronte a IE avresti bisogno di qualcosa come:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}Ma l'unico problema con questo è che significa che qualsiasi cosa all'interno del contenitore avrà anche un'opacità di 0,3. Quindi dovrai cambiare il tuo HTML per avere un altro contenitore, non all'interno di quello trasparente, che contiene il tuo contenuto.
Altrimenti la tecnica png funzionerebbe. Tranne che avresti bisogno di una correzione per IE6, che di per sé potrebbe causare problemi.
rgba()fino alla versione 3 e Opera non lo supportava fino alla versione 10.
Sono in ritardo alla festa, ma per chiunque lo trovi questo articolo è molto utile: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
Utilizza il filtro sfumatura per visualizzare un colore solido ma trasparente.
Per utilizzare lo rgbasfondo in IE è disponibile un fallback.
Dobbiamo usare la proprietà del filtro. che usaARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;questo è il fallback per rgba(255, 255, 255, 0.2)
Cambia #33ffffffsecondo il tuo.
ARGBperRGBAÈ molto semplice che devi dare prima devi dare il backgound come rgb perché Internet Explorer 8 supporterà rgb invece rgba e poi devi dare opacità come filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);Questa è una soluzione di trasparenza per la maggior parte dei browser, incluso IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}La migliore soluzione che ho trovato finora è quella proposta da David J Marland nel suo blog , per supportare l'opacità nei vecchi browser (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}Dopo aver cercato molto, ho trovato la seguente soluzione che funziona nei miei casi:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}* Importante: per calcolare ARGB (per IE) da RGBA, possiamo utilizzare strumenti online:
rgba()i valori di colore non sono supportati in IE 8.