transparencia - opacity css
¿Opacidad del fondo de div sin afectar el elemento contenido en IE 8? (7)
opacity en el elemento padre lo establece para todo el árbol sub DOM
Realmente no se puede establecer la opacidad para cierto elemento que tampoco se aplicaría en cascada a los descendientes. Así no es como funciona la opacity CSS, me temo.
Lo que puede hacer es tener dos elementos hermanos en un contenedor y establecer el posicionamiento transparente:
<div id="container">
<div id="transparent"></div>
<div id="content"></div>
</div>
luego debe establecer la position: absolute/relative transparente position: absolute/relative para que su hermano de contenido se represente sobre ella.
rgba puede hacer transparencia de fondo de fondos de color
rgba configuración del color rgba color de background-color del elemento funcionará, por supuesto, pero limitará el uso del color como fondo. No hay imágenes, me temo Por supuesto, puede usar degradados de CSS3 si proporciona colores de parada de degradado en rgba . Eso también funciona
Pero tenga en cuenta que rgba puede no ser compatible con los navegadores necesarios.
Funcionalidad de diálogo modal libre de alertas
Pero si buscas algo así como enmascarar toda la página, esto generalmente se hace agregando un div separado con 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 z-index más alto. Pero estos dos elementos no están relacionados en términos de hermanos ni nada. Simplemente se muestran como deberían ser. Uno sobre el otro.
Quiero establecer la opacidad del fondo de div sin afectar el elemento contenido en IE 8. Tengo una solución cualquiera y no respondo para establecer 1 x 1 imagen .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.
¿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>
Afecta a las divisiones secundarias enteras cuando utiliza la función de opacidad con posiciones distintas de absolutas. Entonces, otra forma de lograrlo es no poner divs dentro de cada uno y luego usar la posición absoluta para los divs. No use ningún color de fondo para la div superior.
El estilo de opacity afecta al elemento completo y a todo lo que contiene. La respuesta correcta a esto es utilizar un color de fondo rgba en su lugar.
El CSS es bastante simple:
.myelement {
background: rgba(200, 54, 54, 0.5);
}
... donde los tres primeros números son los valores rojo, verde y azul para el color de fondo, y el cuarto es el valor del canal "alfa", que funciona de la misma manera que el valor de opacity .
Consulte esta página para obtener más información: http://css-tricks.com/rgba-browser-support/
El lado negativo es que esto no funciona en IE8 o inferior. La página que he vinculado arriba también enumera algunos otros navegadores en los que no funciona, pero a esta altura ya son muy antiguos; todos los navegadores en uso actual excepto IE6 / 7/8 funcionarán con colores rgba.
La buena noticia es que puedes 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 las versiones anteriores de IE, incluidos los colores de fondo de rgba.
Para usar CSS3Pie para fondos, debe agregar una -pie-background específica de -pie-background a su CSS, así como el estilo de behavior PIE, para que su hoja de estilo termine 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 han mencionado otros, puede usar el estilo de filter de IE con la palabra clave de gradient . La solución CSS3Pie realmente utiliza esta misma técnica detrás de escena, pero elimina la necesidad de que te metas directamente con los filtros de IE, por lo que tus hojas de estilo son mucho más limpias. (También agrega un montón de otras características agradables también, pero eso no es relevante para esta discusión)
Intente configurar el índice Z más alto en el elemento contenido.
Tal vez haya una respuesta más simple, intente agregar cualquier color de fondo que desee al código, como color de fondo: #fff;
#alpha {
background-color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
}
es simple, solo tienes que hacer es dar
background: rgba(0,0,0,0.3)
y para IE utiliza 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 */
puedes generar tu filtro de rgba desde aquí http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/