¿Opacidad de imagen de fondo CSS?

Relacionado con ¿Cómo le doy a un texto o una imagen un fondo transparente usando CSS? , pero ligeramente diferente.

Me gustaría saber si es posible cambiar el valor alfa de una imagen de fondo , en lugar de solo el color. Obviamente, puedo guardar la imagen con diferentes valores alfa, pero me gustaría poder ajustar el alfa dinámicamente.

Hasta ahora, lo mejor que tengo es:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

Funciona, pero es voluminoso y feo, y estropea las cosas en diseños más complicados.

Si el fondo no tiene que repetirse, puede usar la técnica de sprites (puertas corredizas) donde coloca todas las imágenes con diferente opacidad en una (una al lado de la otra) y luego simplemente cambia de lugar con background-position.

O puede declarar la misma imagen de fondo parcialmente transparente más de una vez, si su navegador de destino admite varios fondos (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). La opacidad de esas múltiples imágenes debería sumarse, cuantos más fondos defina.

Este proceso de combinación de transparencias se llama Alpha Blending y se calcula como (gracias @IainFraser):

αᵣ = α₁ + α₂(1-α₁)donde αoscila entre 0 y 1.

Puede hacer el fondo difuminado con contenido generado por CSS

Demostración en http://jsfiddle.net/gaby/WktFm/508/

HTML

<div class="container">
        contents
</div>

CSS

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

Pero no puede modificar la opacidad ya que no podemos modificar el contenido generado.

Sin embargo, puede manipularlo con clases y eventos css ( pero no estoy seguro de si se ajusta a sus necesidades )

por ejemplo

.container:hover:before{
    opacity:1;
}

ACTUALIZAR

Puede usar transiciones css para animar la opacidad ( nuevamente a través de clases )

demostración en http://jsfiddle.net/gaby/WktFm/507/

Añadiendo

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

a la .container:beforeregla hará que la opacidad se anime a 1 en un segundo.

Compatibilidad

• FF 5 ( quizás 4 también, pero no lo tengo instalado ) .
• IE 9 falla ...
• Los navegadores basados ​​en Webkit fallan ( Chrome lo admite ahora v26, tal vez versiones anteriores también, pero solo verifiqué con mi compilación actual ), pero están al tanto y están trabajando en ello ( https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. así que solo el último FF lo admite por el momento .. pero una buena idea, ¿no? :)

.class {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
}

Copiado de: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Pruebe este truco ... use la sombra css con la opción (recuadro) y haga 200px de profundidad, por ejemplo

Código:

box-shadow: inset 0px 0px 277px 3px #4c3f37;

.

También para todos los navegadores:

-moz-box-shadow: inset 0px 0px 47px 3px #4c3f37;
-webkit-box-shadow: inset 0px 0px 47px 3px #4c3f37;
box-shadow: inset 0px 0px 277px 3px #4c3f37;

y aumente el número para llenar su casilla :)

¡Disfrutar!

Puede poner un segundo elemento dentro del elemento en el que desea tener un fondo transparente.

<div class="container">
    <div class="container-background"></div>
    <div class="content">
         Yay, happy content!
    </div>
</div>

Luego, coloque el '.container-background' absolutamente para cubrir el elemento principal. En este punto, podrá ajustar la opacidad sin afectar la opacidad del contenido dentro de '.container'.

.container {
    position: relative;
}
.container .container-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(background.png);
    opacity: 0.5;
}
.container .content {
    position: relative;
    z-index: 1;
}

Prueba esto

<div style="background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url(/image.png);background-repeat: no-repeat; background-position: center;"> </div>

No puede editar la imagen mediante CSS. La única solución que se me ocurre es editar la imagen y cambiar su opacidad, o hacer diferentes imágenes con todas las opacidades necesarias.

#id {
  position: relative;
  opacity: 0.99;
}

#id::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url('image.png');
  opacity: 0.3;
}

Hack con opacidad 0,99 (menos de 1) crea un contexto de índice z para que no pueda preocuparse por los valores globales del índice z. (Intente eliminarlo y vea qué sucede en la siguiente demostración donde el contenedor principal tiene un índice z positivo).
Si su elemento ya tiene un índice z, entonces no necesita este truco.

Demo .

Aquí hay otro enfoque para configurar el gradiente y la transparencia con CSS. Sin embargo, necesitas jugar un poco con los parámetros.

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, transparent)),url("gears.jpg"); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* FF3.6+ */
background-image:     -ms-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* IE10+ */
background-image:      -o-linear-gradient(top, transparent, transparent),url("gears.jpg"); /* Opera 11.10+ */
background-image:         linear-gradient(to bottom, transparent, transparent),url("gears.jpg"); /* W3C */

body {
  ' css code that goes in your body'
}

body::after {
  background: url(yourfilename.jpg);
  content: "";
  opacity: 0.6;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
  width:auto;
  height: 100%;
  }

Por así decirlo, es el cuerpo :: después de lo que estás buscando. De esta manera, el código de su cuerpo no se modifica ni se altera, solo el fondo donde puede realizar cambios cuando sea necesario.