CSS sfondo opacità con RGBA non funziona in IE 8
https://stackoverflow.com/questions/3975688
-
09-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto usando questo CSS per lo sfondo opacità di un <div>:
background: rgba(255, 255, 255, 0.3);
E 'bene lavorare in Firefox, ma non in IE 8. Come faccio a farlo funzionare?
Soluzione
Crea una png, che è più grande di 1x1 pixel (grazie thirtydot), e che corrisponde al la trasparenza dello sfondo.
EDIT: a ripiegare per il supporto IE6 +, è possibile specificare pezzo bkgd per il png, questo è un colore che sostituirà la vera trasparenza alfa se non è supportato. È possibile risolvere il problema con GIMP ad es.
Altri suggerimenti
per simulare RGBA e HSLA sfondo in IE, è possibile utilizzare un filtro gradiente, con lo stesso inizio e fine colore (alfa canale è la prima coppia di valore del 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 ha uno strumento per aiutarvi a generare alfa-trasparente sfondo:
http://hammerspace.co.uk/ 2011/10 / cross-browser-alfa-trasparente-background-css
#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-, alternative sono:
con i 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 semplicemente farlo con jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Anche se in ritardo, ho dovuto usare che oggi e ha trovato qui che vi permetterà di creare in modo dinamico un file PNG, proprio come le opere modo 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 non può essere la soluzione perfetta per tutti, ma vale la pena considerare in alcuni casi, dal momento che consente di risparmiare un sacco di tempo e funziona perfettamente. Speranza che aiuta qualcuno!
Ci sono per lo più tutto il supporto del browser di codice RGBA in CSS, ma solo IE8 e sotto il livello non supporta RGBA codice CSS. Per questo qui è una soluzione. Per la soluzione si deve seguire questo codice ed è meglio andare con essa la sequenza altrimenti non sarà possibile ottenere l'output perfetto come si desidera. Questo codice viene utilizzato da me ed è per lo più perfetto. rendere 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);
}
È possibile utilizzare i CSS per modificare 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 di questo è che significa qualche cosa all'interno del contenitore sarà anche 0.3 opacità. Così si dovrà modificare il codice HTML per avere un altro contenitore, non dentro quella trasparente, che tiene sul suo sito web.
In caso contrario, la tecnica png, avrebbe funzionato. Tranne che avresti bisogno di una correzione per IE6, che di per sé potrebbe causare problemi.
Sono in ritardo alla festa, ma per chiunque altro che trova questo - questo articolo è molto utile: http://kilianvalkhof.com/2010/css- xhtml / how-to-use-RGBA-in-iE /
Si utilizza il filtro gradiente per visualizzare colore solido ma trasparente.
Per uso rgba sfondo in IE v'è un ripiego.
Dobbiamo utilizzare la proprietà del filtro. che usi ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
questo è ripiego per rgba(255, 255, 255, 0.2)
Cambia #33ffffff in base alle tue.
Come calcolare ARGB per RGBA
questo ha lavorato per me per risolvere il problema in IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Saluti
Questa soluzione funziona davvero, provalo. Testato in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
E 'molto semplice devi dare prima devi dare backgound come RGB perché Internet Explorer 8 sarà compatibile con RGB invece RGBA e poi u have a dare l'opacità come filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
Questa soluzione trasparenza una per la maggior parte dei browser, tra cui Internet Explorer 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 soluzione migliore che ho trovato finora è quella proposta da David J Marland nella sua blog , al supporto opacità 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 un sacco, ho trovato la soluzione seguente che sta lavorando 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, siamo in grado di utilizzare gli strumenti on-line:
