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


112

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.


No puedes hacer esto. La propiedad opacidad afecta a todo el contenido de su elemento (otros elementos html + texto). Pero no entiendo por qué no quieres usar png. Solo tendrá que cambiar la imagen juntos, cambiar el css (porque creo que tiene un CSS diferente que puede ser
cambiado

@Corum: Qué equivocado estás (tanto como yo). Es posible. Consulte esta publicación de blog. robertnyman.com/2010/01/11/… Increíblemente inteligente.
Robert Koritnik

Recién publicado aquí: < stackoverflow.com/a/11755175/1491212 > ¡Espero que pueda ayudar!
Armel Larcier

Respuestas:


236

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)


1
¡brillante! Esto me ayudó mucho.
Jordan Starrk

22

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/


1
¿Qué tienen que ver los degradados con la opacidad? : S
Robert Koritnik

@Robert Koritnik: vea mi versión de esta respuesta para una mejor explicación - stackoverflow.com/questions/5160419/… también aquí: stackoverflow.com/questions/4788564/…
thirtydot

@robert, es un único filtro de IE que está disponible en la web, ha tenido el mismo efecto que rgba y no soy un experto en filtros.
sandeep

@Robert simplemente funciona;) vea este enlace - @sandeep Arreglé el código de filtro para agregar los ingredientes necesarios (fondo transparente y hasLayout), cambie el orden del filtro ... siéntase libre de retroceder si no está de acuerdo;)
clairesuzy

1
Los filtros @sandeep no funcionarán sin hasLayout, es posible que tengas otra propiedad hasLayout en tu código, ¿ancho quizás? Estoy trabajando con una sola mano ... me rompí la muñeca, de ahí mis lentas respuestas, pero aquí está jsfiddle con el código IE relevante en un comentario condicional para comparar los dos métodos
clairesuzy

8

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.


esta es la respuesta correcta, incluso con imágenes bg
Botea Florin

2

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


1

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


0

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

2
¡También está afectando el contenido!
Germa Vinsmoke

0

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.


0

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;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.