How can I put the opacity attribute on an element without affecting another element that is inside?

Question

How can I put the opacity attribute on an element without affecting another element that is inside?

Navigation

#1 by (2 votes)

1

What I try to do is put the opacity on an element that has another element as a child, but if you add it to the parent element the child element inherits that opacity and I do not want that.

I want to make them contrast, so that the child looks smooth and the father gives a layer effect.

Current code of the father:

    //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',

Son's code:

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

In summary, in these two lines of code what I do is assign an opacity to the father and therefore to the child, but later I assign it an opacity superior to the child but it does not process it correctly.

Note: I am using the design library (AnimatedModal.js)

html5 css3

asked by David 23.06.2017 в 05:50

source

1 answer

Error updating a unique field Problem with columns in Primefaces

score 2 · Accepted Answer

If you use opacity browsers use an intermediate buffer to paint these elements, so there is no way to control the opacity of children.

There is a trick that is to use color with the function rgba() that applies an alpha channel and that is processed differently in browsers.

That is, instead of putting:

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

You must use the following:

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

The last parameter of the rgba function is opacity, just as it is indicated to opacity .

I'll give you an example. The white div is below the whole, the father (red) does have transparency, but the son (yellow) does not have it.

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>