Con CSS y CSS3 puede hacer muchas cosas, pero establecer una opacidad en un fondo de CSS no es una de ellas. Sin embargo, si usa la creatividad, hay muchas soluciones creativas para hacer que parezca que está cambiando la opacidad de la imagen de fondo de CSS. Ambos métodos tienen una excelente compatibilidad con navegadores, que llega hasta Internet Explorer 8.

Método 1: Utilizar el posicionamiento absoluto y una imagen

Este método significa exactamente lo que dice. Simplemente se utiliza el posicionamiento absoluto en una etiqueta img normal y se hace que parezca que se usó la propiedad de background-image de CSS. Lo único que debe hacer es poner la imagen dentro de un contenedor position: relative;. Generalmente, así es como se ve el formato HTML:

<div class="demo_wrap">
  <h1>Hello World!</h1>
  <img src="https://assets.digitalocean.com/labs/images/community_bg.png">
</div>

Y así es como se verá su CSS:

.demo_wrap {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px dashed green;
}
.demo_wrap h1 {
    padding: 100px;
    position: relative;
    z-index: 2;
}
.demo_wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.6;
}

El truco aquí es realizar un posicionamiento absoluto de la etiqueta img y estirarla para que llene el contenedor principal por completo. Y posicionar relativamente todo lo demás para poder establecer un z-index que lo arrastre por encima de img.

A continuación, se muestra una demostración en tiempo real:

Hello World!

Método 2: Usar los seudoelementos de CSS

Este método luce sencillo a primera vista y definitivamente es el método preferido para hacerlo. Al usar los seudoelementos de CSS de :before o :after, puede crear un div con una imagen de fondo y establece una opacidad en ella. A continuación, se muestra el aspecto que tendría su formato HTML de forma aproximada:

<div class="demo_wrap">
  <h1>Hello World!</h1>
</div>

Y así es como se vería el CSS:

   .demo_wrap {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
.demo_wrap h1 {
    padding: 50px;
    position: relative;
    z-index: 2;
}
/* You could use :after - it doesn't really matter */
.demo_wrap:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

Aquí también debemos mover el índice z del contenido (en este caso el <h1>) por encima del seudoelemento de fondo y debemos definir explícitamente position: absolute; y z-index: 1 en el seudoelemento :before.

El resto de los atributos del seudoelemento existe para posicionarlo de manera que se superponga al 100% del elemento principal y también hacen uso de una nueva e inteligente propiedad de CSS: background-size: cover que dimensiona el fondo para cubrir el elemento sin cambiar las proporciones. A continuación, se muestra una pequeña demostración de este método: