¿Como puedo poner el atributo opacity a un elemento sin afectar a otro elemento que esta adentro?

publicado por: Anonymous

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)

solución

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.

_x000D_

_x000D_

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

_x000D_

<div id='control'></div>_x000D_
<div id='padre'>_x000D_
Padre_x000D_
<div id='hijo'>_x000D_
Hijo_x000D_
</div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *