Opacità dello sfondo del div senza influire sull'elemento contenuto in IE 8?

Voglio impostare l'opacità dello sfondo del div senza influire sull'elemento contenuto in IE 8. ho una soluzione qualsiasi e non rispondere per impostare l'immagine 1 X 1 .png e impostare l'opacità di quell'immagine perché sto usando l'opacità dinamica e l'amministratore del colore può cambiare quello

L'ho usato ma non funzionava in IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

e

rgba(0,0,0,0.3)

anche.

Lo opacitystile influenza l'intero elemento e tutto ciò che contiene. La risposta corretta a questa domanda è utilizzare invece un colore di sfondo rgba.

Il CSS è abbastanza semplice:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... dove i primi tre numeri sono i valori rosso, verde e blu per il colore di sfondo e il quarto è il valore del canale "alfa", che funziona allo stesso modo del opacityvalore.

Vedi questa pagina per maggiori informazioni: http://css-tricks.com/rgba-browser-support/

Lo svantaggio è che questo non funziona in IE8 o inferiore. La pagina che ho collegato sopra elenca anche alcuni altri browser in cui non funziona, ma ormai sono tutti molto vecchi; tutti i browser attualmente in uso eccetto IE6 / 7/8 funzioneranno con i colori rgba.

La buona notizia è che puoi forzare IE a lavorare anche con questo, usando un hack chiamato CSS3Pie . CSS3Pie aggiunge una serie di moderne funzionalità CSS3 alle versioni precedenti di IE, inclusi i colori di sfondo rgba.

Per usare CSS3Pie per gli sfondi, devi aggiungere una -pie-backgrounddichiarazione specifica al tuo CSS, così come lo behaviorstile PIE , in modo che il tuo foglio di stile finisca per assomigliare a questo:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Spero che aiuti.

[MODIFICARE]

Per quel che vale, come altri hanno già detto, puoi usare lo filterstile di IE , con la gradientparola chiave. La soluzione CSS3Pie utilizza effettivamente la stessa tecnica dietro le quinte, ma elimina la necessità di scherzare direttamente con i filtri di IE, quindi i tuoi fogli di stile sono molto più puliti. (aggiunge anche un sacco di altre belle funzionalità, ma non è rilevante per questa discussione)

è semplice, solo tu devi dare

background: rgba(0,0,0,0.3)

& per IE usa questo filtro

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

puoi generare il tuo filtro rgba da qui http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity sull'elemento genitore lo imposta per l'intero albero secondario DOM

Non puoi davvero impostare l'opacità per determinati elementi che non ricaderebbero anche sui discendenti. Non è così che opacityfunzionano i CSS, temo.

Quello che puoi fare è avere due elementi fratelli in un contenitore e impostare il posizionamento trasparente di uno:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

quindi devi impostare trasparente in position: absolute/relativemodo che il suo contenuto gemello venga visualizzato su di esso.

rgba può fare la trasparenza dello sfondo di sfondi colorati

rgbaL'impostazione del colore sugli elementi background-colorfunzionerà ovviamente, ma ti limiterà a usare solo il colore come sfondo. Nessuna immagine temo. Ovviamente puoi usare i gradienti CSS3 se fornisci i colori di interruzione del gradiente in rgba. Funziona anche questo.

Ma tieni presente che rgbapotrebbe non essere supportato dai browser richiesti.

Funzionalità di dialogo modale senza avvisi

Ma se stai cercando un qualche tipo di mascheramento dell'intera pagina, questo di solito viene fatto aggiungendo uno separato divcon questo set di stili:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

Quindi quando visualizzi il contenuto dovrebbe avere un valore più alto z-index. Ma questi due elementi non sono correlati in termini di fratelli o altro. Sono solo visualizzati come dovrebbero essere. Uno sull'altro.

Prova a impostare lo z-index più in alto sull'elemento contenuto.

Che dire di questo approccio:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Forse c'è una risposta più semplice, prova ad aggiungere qualsiasi colore di sfondo che ti piace al codice, come background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Ha effetto sull'intero div figlio quando si utilizza la funzione di opacità con posizioni diverse da quella assoluta. Quindi un altro modo per ottenerlo è quello di non mettere i div uno dentro l'altro e quindi utilizzare la posizione assoluta per i div. Non utilizzare alcun colore di sfondo per il div superiore.

Usa RGBA o se inserisci il codice esadecimale, quindi modificalo in rgba. Non c'è bisogno di fare qualche elemento presodu css.

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

O

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;