Set opacity of background image without affecting child elements

Question

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

Example

All links in the footer need a custom bull

Answer 1

The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.

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

P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.

Answer 2

#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;
}

Hack with opacity .99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.

Demo of this technique.

Answer 3

Unfortunately, at the time of writing this answer, there is no direct way to do this. You need to:

1. use a semi-transparent image for background (much easier).
2. add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.