html - transparente - Opacidad de fondo CSS

css background opacity transparent

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS? 27 respuestas

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.

Answer 1

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.

Answer 2

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>

Answer 3

Los siguientes métodos pueden usarse para resolver su problema.

1. Método de transparencia CSS Aplha (no funciona en IE 8)

   #div{background-color:rgba(255,0,0,0.5);}

2. Utilice una imagen png transparente según su elección como fondo.

3. Utilice el siguiente fragmento de código css para crear un fondo transparente alfa para todos los navegadores. Aquí hay un ejemplo con #000000 @ 0.4% de opacidad

   .div {  
       background:rgb(0,0,0);  
       background: transparent/9;  
       background:rgba(0,0,0,0.4);  
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
       zoom: 1;  
   }    
   .div:nth-child(n) {  
       filter: none;  
   }

Para obtener más detalles sobre esta técnica, vea this , que tiene un generador de css en línea.

Answer 4

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 .

Answer 5

Puedes usar Sass transparentize , encontré que es el más útil y fácil de usar.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

Ver más: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

Answer 6

Solo asegúrese de colocar el ancho y la altura para el primer plano con el fondo, o intente tener las propiedades superior, inferior, izquierda y derecha.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>

Answer 7

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.

Answer 8

.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)";}