pero - No quiero heredar la opacidad del hijo del padre en CSS

imagen de fondo transparente html

Question

No quiero heredar la opacidad del hijo del padre en CSS.

Tengo un div que es el padre, y tengo otro div dentro del primer div que es el hijo.

Quiero establecer la propiedad de opacidad en el div principal, pero no quiero que el div secundario herede la propiedad de opacidad.

¿Cómo puedo hacer eso?

Answer 1

Asigne opacidad 1.0 al niño recursivamente con:

div > div { opacity: 1.0 }

Ejemplo:

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>

Answer 2

Como otros han mencionado en este y otros subprocesos similares, la mejor manera de evitar este problema es usar RGBA / HSLA o usar un PNG transparente.

Pero, si desea una solución ridícula, similar a la vinculada en otra respuesta en este hilo (que también es mi sitio web), aquí hay un nuevo script que escribí que soluciona este problema automáticamente, llamado thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Básicamente, utiliza JavaScript para eliminar a todos los elementos secundarios de la división principal y, a continuación, vuelve a colocar los elementos secundarios en el lugar en el que deberían estar sin ser hijos de ese elemento.

Para mí, esto debería ser un último recurso, pero pensé que sería divertido escribir algo que hiciera esto, si alguien quiere hacerlo.

Answer 3

En lugar de usar opacidad, establezca un color de fondo con rgba, donde ''a'' es el nivel de transparencia.

Así que en lugar de:

background-color: rgb(0,0,255); opacity: 0.5;

utilizar

background-color: rgba(0,0,255,0.5);

Answer 4

La opacidad del elemento hijo se hereda del elemento padre.

Pero podemos usar la propiedad de la posición css para lograr nuestro logro.

El contenedor de texto div se puede colocar fuera del div principal pero con posicionamiento absoluto proyectando el efecto deseado.

Requisito ideal ------------------ >>>>>>>>>>>>

HTML

 <div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>

CSS

 .container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}

Salida:--

el texto no es visible porque se hereda la opacidad de la división principal.

Solución ------------------- >>>>>>

HTML

 <div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>

CSS

 .container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}

Salida:

El texto es visible con el mismo color que el de fondo porque el div no está en el div transparente

Answer 5

La opacidad no se hereda realmente en CSS. Es una transformación de grupo post-rendering. En otras palabras, si un <div> tiene un conjunto de opacidad, renderiza el div y todos sus hijos en un búfer temporal, y luego compila todo el búfer en la página con la configuración de opacidad dada.

Lo que exactamente desea hacer aquí depende de la representación exacta que esté buscando, lo que no queda claro en la pregunta.

Answer 6

La pregunta no definió si el fondo es un color o una imagen, pero dado que @Blowski ya ha respondido para fondos de colores, hay un truco para las imágenes a continuación:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(''image.jpg'');

De esta manera puede manipular el color de su opacidad e incluso agregar agradables efectos de degradado.

.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url(''http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg'');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

Answer 7

Las respuestas de arriba me parecen complicadas, así que escribí esto:

#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}

<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>

kb-mask-overlay es tu padre (opacidad), pop-up son tus hijos (sin opacidad). Todo lo que está debajo es el resto de tu sitio.

Answer 8

Mi respuesta no es sobre el diseño estático entre padres e hijos, sino sobre animaciones.

Estaba haciendo una demostración de svg hoy, y necesitaba svg para estar dentro de div (porque svg se crea con el ancho y la altura de los padres, para animar la ruta), y este div padre tenía que ser invisible durante la animación de la ruta svg (y luego se suponía que esta división animate opacity from 0 to 1 , es la parte más importante). Y debido a que el div padre con opacity: 0 estaba ocultando mi svg, me topé con este hack con la opción de visibility (niño con visibility: visible se puede ver dentro del padre con visibility: hidden ):

.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}

Y luego, en js, estás eliminando la clase .invisible con la función de tiempo de espera, agregando la clase .opacity-zero , .opacity-zero diseño con algo como whatever.style.top; .opacity-zero whatever.style.top; y eliminando la clase .opacity-zero .

var $main = $(".main");
setTimeout(function() {
$main.addClass(''opacity-zero'').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);

Mejor ver esta demostración http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Answer 9

No existe un enfoque de talla única, pero una cosa que encontré particularmente útil es establecer la opacidad para los hijos directos de un div, excepto el que desea mantener totalmente visible. En codigo:

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>

y css:

div.parent > div:not(.child1){
opacity: 0.5;
}

En caso de que tenga imágenes / colores de fondo en el padre, corrija la opacidad del color con rgba e imagen de fondo aplicando filtros alfa

Answer 10

Para otras personas que intentan hacer que una mesa (o algo) se vea enfocada en una fila usando opacidad. Al igual que @Blowski dijo usar color no opacidad. Echa un vistazo a este violín: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)

Answer 11

Parece que la display: block elementos de display: block no heredan la opacidad de la display: inline padres en display: inline .

Ejemplo de codepen

Tal vez porque es un marcado no válido y el navegador los está separando en secreto. Porque la fuente no muestra que eso suceda. ¿Me estoy perdiendo de algo?

Answer 12

Si tiene que usar una imagen como fondo transparente, es posible que pueda solucionarlo utilizando un pseudo elemento:

html

<div class="wrap">
<p>I have 100% opacity</p>
</div>

css

.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}

Answer 13

Un pequeño truco si su padre es transparente y le gustaría que su hijo sea el mismo, pero definido exclusivamente (por ejemplo, para sobrescribir los estilos de agente de usuario de un menú desplegable de selección):

.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}

Answer 14

En Mac , puede usar el editor de vista previa para aplicar opacidad a un rectángulo blanco colocado sobre su imagen .png antes de colocarlo en su archivo .css.

1) Imagen
Logo

2) Crea un rectángulo alrededor de la imagen.
Rectángulo alrededor del logo

3) Cambiar el color de fondo a blanco
rectángulo blanco

4) Ajustar la opacidad del rectángulo
imagen opaca