Opacidad de fondo CSS

Estoy usando algo similar al siguiente código:

Text

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.

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:

 
Text added.

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

 
Text.

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 los valores del z-index Z.

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 esto , que tiene un generador css en línea.

Haría algo como esto

 

text yay!

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.

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

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

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

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

puedes crear dos divisiones separadas como estas:

 

establezca su opacidad css deseada y otras propiedades para el fondo hte y utilice la propiedad z-index ( z-index ) para aplicar estilo 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.

Solo asegúrate de poner el ancho y el alto para el primer plano de la misma forma que el fondo, o intenta tener las propiedades superior, inferior, izquierda y derecha.