Pregunta Opacidad de fondo CSS [duplicado]


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>

Esperé que esto hiciera que el fondo tuviera una opacidad de 0.4 y el texto tuviera una opacidad del 100%. En cambio, ambos tienen una opacidad de 0.4.


522
2018-05-02 23:05


origen


Respuestas:


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 desvanecido:

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


927
2018-05-02 23:07



Puedes usar CSS 3 :before tener un fondo semitransparente y puedes hacerlo con solo un 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);
}

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

Nota: es posible que deba ajustar el z-index valores.


128
2017-09-24 15:26



Los siguientes métodos se pueden usar 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. Use una imagen png transparente según su elección como fondo.

  3. Utilice el siguiente fragmento de código css para crear un fondo alfa-transparente entre 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, consulte esta, que tiene un generador css en línea.


38
2017-09-24 16:06



Haría algo como esto

<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 supone que se requiere que tenga una imagen semitransparente, por cierto, y no un color (para lo cual solo debe usar rgba). También se supone que no se puede modificar la opacidad de la imagen de antemano en photoshop.


23
2018-05-02 23:28



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

6
2018-03-16 06:08



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


4
2018-03-21 12:53



Esto se debe a que el div interno tiene el 100% de la opacidad del div en el que está anidado (que tiene un 40% de opacidad).

Para eludirlo, hay algunas cosas que podrías hacer.

puedes crear dos divisiones separadas como estas:

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

establezca su opacidad css deseada y otras propiedades para el fondo y utilice la propiedad z-index (índice z) para diseñar y posicionar el bContent div. Con esto puedes colocar el divisor div de la div de fondo sin tener que opacar su opacidad.


Otra opción es RGBa. Esto te permitirá anidar tus divs y aun así lograr la 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 deseado de su elección, establecer la propiedad de la imagen de fondo en la url de la imagen y luego no tendrá que preocuparse por el descuido con el CSS y perdiendo la capacidad y organización de una estructura div anidada.


3
2018-05-02 23:14