¿Puedo configurar la imagen de fondo y la opacidad en la misma propiedad?

Puedo ver en referencias de CSS cómo configurar la transparencia de la imagen y cómo configurar una imagen de fondo . Pero, ¿cómo puedo combinar estos dos para establecer una imagen de fondo transparente?

Tengo una imagen que me gustaría usar como fondo, pero es demasiado brillante; me gustaría reducir la opacidad a aproximadamente 0,2. ¿Cómo puedo hacer esto?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

Nov 15 '10 18:11 AP257

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Jun 01 '2012 11:06 Dan Eastwell

Dos métodos:

Convierta a PNG y haga que la imagen original tenga una opacidad de 0,2
(Mejor método) tenga un <div>que esté position: absolute;antes #mainy con la misma altura que #main, luego aplique la imagen de fondo y opacity: 0.2; filter: alpha(opacity=20);.

Nov 15 '2010 11:11 Niet the Dark Absol

Solución con 1 div y SIN imagen transparente:

Puedes usar la función CSS3 multifondo y poner dos fondos: uno con la imagen, otro con un panel transparente encima (porque creo que no hay forma de establecer directamente la opacidad de la imagen de fondo):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

No puedes usarlo rgba(255,255,255,0.5)porque solo se acepta en la parte posterior, por lo que he usado gradientes generados para cada navegador para este ejemplo (por eso es tan largo). Pero el concepto es el siguiente:

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

Jul 30 '2013 11:07 Wood

Solución simple

Si necesita configurar el degradado solo en imagen de fondo :

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);

Mar 15 '2016 12:03 Francesco Borzi