¿Es posible establecer la opacidad de una imagen de fondo sin afectar la opacidad de los elementos secundarios?

Ejemplo

Todos los enlaces en el pie de página necesitan una viñeta personalizada (imagen de fondo) y la opacidad de la viñeta personalizada debe ser del 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

Lo que he probado

Intenté establecer la opacidad de los elementos de la lista al 50%, pero luego la opacidad del texto del enlace también es del 50%, y no parece haber una manera de restablecer la opacidad de los elementos secundarios:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

También intenté usar rgba, pero eso no tiene ningún efecto en la imagen de fondo:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

Puedes usar CSS linear-gradient()con rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

Lleva tu imagen a un editor de imágenes, baja la opacidad, guárdala como .png y úsala en su lugar.

Esto funcionará con todos los navegadores

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Si no desea que la transparencia afecte a todo el contenedor y sus elementos secundarios, consulte esta solución alternativa. Debe tener un hijo absolutamente posicionado con un padre relativamente posicionado.

Consulte la demostración en http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Si está utilizando la imagen como una viñeta, puede considerar el pseudo elemento: before.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

Puede poner la imagen en el div: after o div: before y establecer la opacidad en ese "div virtual"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

encontrado aquí http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Hackear con opacidad .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 próxima demostración donde el contenedor principal tiene un índice z positivo).
Si su elemento ya tiene un índice z, entonces no necesita este truco.

Demostración de esta técnica .

Desafortunadamente, al momento de escribir esta respuesta, hay hay una forma directa de hacerlo. Necesitas:

1. use una imagen semitransparente para el fondo (mucho más fácil).
2. agregue un elemento adicional (como div) al lado de los niños que desea que sea opaco, agregue un fondo y, después de hacerlo semitransparente, colóquelo detrás de los niños mencionados.

Otra opción es el enfoque de CSS Tricks de insertar un pseudo elemento del tamaño exacto del elemento original justo detrás de él para simular el efecto de fondo opaco que estamos buscando. A veces necesitará establecer una altura para el pseudo elemento.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

La propiedad "filtro" necesita un número entero para el porcentaje de opacidad en lugar de doble, para que funcione para IE7 / 8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PD: publico esto como respuesta, ya que SO necesita al menos 6 caracteres modificados para una edición.

Para ajustar realmente las cosas, recomiendo colocar las selecciones apropiadas en los contenedores de orientación del navegador. Esto fue lo único que funcionó para mí cuando no pude lograr que IE7 e IE8 "jugaran bien con los demás" (ya que actualmente estoy trabajando para una compañía de software que continúa apoyándolos).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

Es posible que tenga redundancias en el código anterior; si alguien desea limpiarlo más, ¡no dude en hacerlo!

Si tiene que establecer la opacidad solo en la viñeta, ¿por qué no establece el canal alfa directamente en la imagen? Por cierto, no creo que haya una manera de establecer la opacidad de una imagen de fondo a través de CSS sin cambiar la opacidad de todo el elemento (y sus hijos también).

Solo para agregar a lo anterior ... puede usar el canal alfa con los nuevos atributos de color, por ejemplo. rgba (0,0,0,0) ok, entonces esto es negro pero con opacidad cero para que, como padre, no afecte al niño. Esto solo funciona en Chrome, FF, Safari y ... Adelgazo O.

convierte tus colores hexadecimales a RGBA

Encontré un tutorial bastante bueno y simple sobre este tema. Creo que funciona muy bien (y aunque es compatible con IE, les digo a mis clientes que usen otros navegadores):

Transparencia de fondo CSS sin afectar elementos secundarios, a través de RGBa y filtros

Desde allí puede agregar soporte de gradiente, etc.

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

Puedes probar este código. Creo que se trabajará. Puedes visitar la demo