html - without - Opacidad de fondo CSS




opacidad imagen de fondo css (6)

Esta pregunta ya tiene una respuesta aquí:

Estoy usando algo similar al siguiente código:

<div style="opacity:0.4; background-image:url(...);">
 <div style="opacity:1.0;">
  Text
 </div>
</div>

Esperaba que esto hiciera que el fondo tuviera una opacidad de 0.4 y que el texto tuviera una opacidad del 100%. En su lugar, ambos tienen una opacidad de 0.4.

https://code.i-harness.com


Esto se debe a que la división interna tiene el 100% de la opacidad de la división en la que está anidada (que tiene una opacidad del 40%).

Para evitarlo hay algunas cosas que podrías hacer.

Podrías crear dos divs separados como este:

<div id="background"></div>
<div id="bContent"></div>

establezca la opacidad de css deseada y otras propiedades para el fondo hte y utilice la propiedad z-index ( z-index ) para diseñar y posicionar el bContent div. Con esto puede colocar el div sobre el divino de fondo sin tener la opacidad oculta.

Otra opción es para RGBa . Esto le permitirá anidar sus divs y aún así lograr una opacidad específica de div.

La última opción es simplemente hacer una imagen .png semitransparente del color que desee en el editor de imágenes que desee, establecer la propiedad de la imagen de fondo en la url de la imagen y así no tendrá que preocuparse de perder con el css y perdiendo la capacidad y organización de una estructura div anidada.


Los niños heredan la opacidad. Sería extraño e inconveniente si no lo hicieran.

Puede usar un png translúcido para su imagen de fondo, o usar un color RGBa (para alfa) para su color de fondo.

Ejemplo, 50% de fondo negro descolorido:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>


Puede usar CSS 3 :before para tener un fondo semitransparente y puede hacer esto con un solo contenedor. Usa algo como esto

<article>
  Text.
</article>

Luego aplica algo de CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Ejemplo: http://codepen.io/anon/pen/avdsi

Nota: Es posible que deba ajustar los valores del z-index .



Yo haria algo asi

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Deberia trabajar. Esto es asumiendo que se requiere que tengas una imagen semitransparente por cierto, y no un color (para lo cual deberías usar rgba). También se asume que no se puede alterar la opacidad de la imagen de antemano en photoshop.


.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}




opacity