¿Opacidad del fondo de div sin afectar el elemento contenido en IE 8?

Quiero establecer la opacidad del fondo de div sin afectar el elemento contenido en IE 8.Tengo una solución y no respondo para establecer la imagen 1 X 1 .png y establecer la opacidad de esa imagen porque estoy usando opacidad dinámica y el administrador de color puede cambiar ese

Lo usé pero no funcionaba en IE 8

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

y

rgba(0,0,0,0.3)

además.

El opacityestilo afecta a todo el elemento y a todo lo que contiene. La respuesta correcta a esto es usar un color de fondo rgba en su lugar.

El CSS es bastante simple:

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

... donde los primeros tres números son los valores rojo, verde y azul para su color de fondo, y el cuarto es el valor del canal 'alfa', que funciona de la misma manera que el opacityvalor.

Consulte esta página para obtener más información: http://css-tricks.com/rgba-browser-support/

La desventaja es que esto no funciona en IE8 o versiones anteriores. La página que vinculé anteriormente también enumera algunos otros navegadores en los que no funciona, pero ya son muy antiguos; todos los navegadores en uso actual excepto IE6 / 7/8 funcionarán con colores rgba.

La buena noticia es que puede obligar a IE a trabajar con esto también, usando un truco llamado CSS3Pie . CSS3Pie agrega una serie de características modernas de CSS3 a versiones anteriores de IE, incluidos los colores de fondo rgba.

Para usar CSS3Pie para fondos, debe agregar una -pie-backgrounddeclaración específica a su CSS, así como el behaviorestilo PIE , por lo que su hoja de estilo terminaría luciendo así:

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

Espero que ayude.

[EDITAR]

Por lo que vale, como otros han mencionado, puede usar el filterestilo de IE , con la gradientpalabra clave. La solución CSS3Pie en realidad usa esta misma técnica detrás de escena, pero elimina la necesidad de jugar directamente con los filtros de IE, por lo que sus hojas de estilo son mucho más limpias. (también agrega un montón de otras características interesantes, pero eso no es relevante para esta discusión)

es simple, lo único que tienes que hacer es dar

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

& para IE use este 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 */

puede generar su filtro rgba desde aquí http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity en el elemento principal lo establece para todo el subárbol DOM

Realmente no puede establecer la opacidad para cierto elemento que no se distribuiría en cascada a los descendientes. opacityMe temo que no es así como funciona CSS .

Lo que puede hacer es tener dos elementos hermanos en un contenedor y establecer la posición de uno transparente:

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

luego debe establecer transparente position: absolute/relativepara que su contenido hermano se represente sobre él.

rgba puede hacer transparencia de fondo de fondos de colores

rgbaLa configuración de color en el elemento, background-colorpor supuesto, funcionará, pero lo limitará a usar solo el color como fondo. No hay imágenes, me temo. Por supuesto, puede usar degradados CSS3 si proporciona colores de parada de degradado en formato rgba. Eso también funciona.

Pero tenga en cuenta que rgbapuede que no sea compatible con los navegadores requeridos.

Funcionalidad de diálogo modal sin alertas

Pero si busca algún tipo de enmascaramiento de toda la página, esto generalmente se hace agregando un elemento separado divcon este conjunto de estilos:

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

Luego, cuando muestre el contenido, debería tener un mayor z-index. Pero estos dos elementos no están relacionados en términos de hermanos ni nada. Simplemente se muestran como deberían. Uno sobre el otro.

Intente establecer el índice z más alto en el elemento contenido.

¿Qué pasa con este enfoque?

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

Tal vez haya una respuesta más simple, intente agregar cualquier color de fondo que desee al código, como background-color: #fff;

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

Afecta a todos los divs secundarios cuando usa la función de opacidad con posiciones distintas a la absoluta. Entonces, otra forma de lograrlo es no poner divs entre sí y luego usar la posición absoluta para los divs. No use ningún color de fondo para el div superior.

Use RGBA o si tiene código hexadecimal, cámbielo a rgba. No es necesario hacer algunos elementos de 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;