1

Lo que intento hacer, es poner la opacidad en un elemento que tiene como hijo a otro elemento, pero si se lo agrego al elemento padre el elemento hijo hereda esa opacidad y no quiero eso.

Quiero hacer que contrasten, para que el hijo se vea sin problemas y el padre dé un efecto de capa.

Codigo actual del padre:

    //Defaults
    var settings = $.extend({
        modalTarget:'animatedModal', 
        position:'fixed', 
        width:'100%', 
        height:'100%', 
        top:'0px', 
        left:'0px', 
        zIndexIn: '1000',  
        zIndexOut: '-9999',  
        color: '#39BEB9', 
        opacityIn:'0.9',   -  Pongo una opacidad para el padre con el hijo 
                               adentro 
        opacityOut:'0', 
        animatedIn:'zoomIn',
        animatedOut:'zoomOut',
        animationDuration:'.6s', 
        overflow:'auto',

Codigo del hijo:

<!-- multistep form -->
<form id="msform" style="opacity:1.0">  --------- Pongo una nueva opacidad 
                                                   al Hijo
  <!-- progressbar -->
  <ul id="progressbar" style="margin-left:30%;">
    <li class="active">Contacto</li>
    <li>Evento</li>
    <li>Banco</li>
  </ul>
  <!-- fieldsets -->
  <fieldset>



    <h2 class="fs-title">Informacion de Contacto</h2>
    <h3 class="fs-subtitle">Paso 1</h3>
    <input type="text" name="nombre" placeholder="Ingrese su Nombre" />
    <input type="text" name="apellidos" placeholder="Ingrese sus Apellidos" />
    <input type="text" name="email" placeholder="Ingrese su correo electronico" />


<br>

<select class="selectpicker" >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<br>

  <button type="button" name="next" class="next action-button" value="Siguiente">
  Siguiente &nbsp <i class="fa fa-chevron-right"></i></button> 



  </fieldset>
  <fieldset>
    <h2 class="fs-title">Informacion del Evento</h2>
    <h3 class="fs-subtitle">Paso 2</h3>
    <input type="text" name="evento" placeholder="Ingrese el nombre del evento" />
    <input type="text" name="lugar" placeholder="Ingrese el lugar o Foro" />

<select class="selectpicker" >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>


<br><br>

<select class="selectpicker" >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>


<br><br>

<input type="number" name="secciones"  placeholder="Ingrese las secciones" />

<input type="range" class="slider-input" value="23" />

    <input type="text" name="boleto" placeholder="Ingrese el tipo de boleto" />

    <textarea rows="5" name="comentario" placeholder="Ingrese algun comentario">

    </textarea> 


<button type="button" name="previous" class="previous action-button" value="Anterior">

<i class="fa fa-chevron-left"></i> &nbsp Anterior

</button>

<button  type="button" name="next" class="next action-button" value="Siguiente">

Siguiente &nbsp<i class="fa fa-chevron-right"></i>

</button>

  </fieldset>
  <fieldset>
    <h2 class="fs-title">Informacion Bancaria</h2>
    <h3 class="fs-subtitle">Paso 3</h3>
    <input type="text" name="nombre_asociado" placeholder="Ingrese el nombre Asociado" />
    <input type="text" name="clabe" placeholder="Ingrese la CLABE" />
    <input type="text" name="banco" placeholder="Ingrese el Banco" />
    <input type="text" name="numero_tarjeta" placeholder="Ingrese el numero de tarjeta" />


<button type="button" name="previous" class="previous action-button" value="Anterior">

<i class="fa fa-chevron-left"></i> &nbsp Anterior


</button>

<button type="submit" name="submit" class="submit action-button" value="Enviar">

 <i class="fa fa-paper-plane"></i> &nbsp  Enviar 

</button>

  </fieldset>
</form>

En resumen, en estas dos lineas de código lo que hago es asignar una opacidad al padre y por ende al hijo, pero después le asigno una opacidad superior al hijo pero no la procesa de forma correcta.

Nota: Estoy usando la libreria de diseño (AnimatedModal.js)

5
  • Podrías reducir un poco más tu código y añadir lo que tengas de CSS? Por favor.
    – lromeraj
    Commented el 23 jun. 2017 a las 5:58
  • Prueba modificando luego la opacidad del hijo a ver si así se corrige.
    – G3l0
    Commented el 23 jun. 2017 a las 6:32
  • @Javi ese es mi código completo, de css solo tengo dos lineas que uso: la que esta en la primera sección que dice opacityIn:0.9, que es el atributo que se encarga de darle la opacidad al elemento padre por medio de una librería y dos que es el style directo que se realiza en el form de la segunda sección, en si no tengo mas .css que pueda mostrar, ya que solo eh agregado esas dos lineas y el resto de mi .css no condiciona nada de la opacidad.
    – David
    Commented el 23 jun. 2017 a las 6:33
  • @G310 es lo que se realiza en las dos secciones de código que proporciones
    – David
    Commented el 23 jun. 2017 a las 6:33
  • No se puede, si aplicas opacity al div padre, la opacidad de todos sus hijos sera igual a la del padre. Lo que podrìas hacer es no aplicar opacity al padre y crear un hijo (con la opacidad que necesitas) y ahi no afecta a los demas hijos
    – Roy Bogado
    Commented el 23 jun. 2017 a las 9:09

1 respuesta 1

4

Si utilizas opacity los navegadores utilizan un buffer intermedio para el pintado de dichos elementos, por lo que no hay manera de controlar la opacidad de los hijos.

Hay un truco que es utilizar el color con la función rgba() que aplica un canal alpha y que se procesa de forma diferente en los navegadores.

Es decir, en vez de poner:

background-color: red; // o #FF0000, o rgb(255,0,0);
opacity: 0.5;

Debes utilizar lo siguiente:

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

El último parámetro de la función rgba es la opacidad, igual que se le indica a opacity.

Te pongo un ejemplo. El div blanco está debajo del todo, el padre (rojo) sí que tiene transparencia, pero el hijo (amarillo) no la tiene.

body {
  background-color: black;
}
#padre {
  background-color: rgba(255,0,0,0.5);
  padding: 50px;
  left: 50px;
  width: 300px;
  height: 150px;
  position: absolute;
  color: white;
}

#hijo {
  background: rgba(255,255,0,1.0);
  padding: 50px;
  color: black;
}
#control {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: white;
}
<div id='control'></div>
<div id='padre'>
Padre
<div id='hijo'>
Hijo
</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.