Can I set the opacity of a background url and the opacity of the background color itself?

Question

Is it possible to set the opacity of a background url image to be .8 and the background color opacity to be .2?

This is what I tried, however it doesn't seem to work.

#tagholder:hover {
    background: rgba(255, 0, 0, 0.8) url("../images/arrow-white.png");
    background-repeat:no-repeat;
    background-position: center;
    background-color: #293333;
    opacity: 0.2;

}

Answer 1

The short answer is no. EDIT: Actually the short answer is yes, see below. Opacity acts like a multiplier on any rgba values present within the same element. Consider this:

 div {
    background-color:rgba(0,0,0,0.5);
    opacity:0.5;
 }

The background opacity of 0.5 (the alpha value) effectively* becomes 0.25 when multiplied by the opacity: 0.5 x 0.5 = 0.25. See this fiddle.

*I say effectively because the colours are slightly different, but it's virtually impossible to tell with the naked eye.

EDIT: As @vals pointed out, you can get the effect originally asked for:

#tagholder:hover {
    background: rgba(255, 0, 0, 0.25) url("../images/arrow-white.png");
    background-repeat:no-repeat;
    background-position: center;
    opacity: 0.8;
}

This would give the whole element an overall opacity of 0.8, while the background colour would have an opacity of 0.2 (0.8 * 0.25 = 0.2). Note, this would also affect the opacity of borders and text colour as well.

Answer 2

No, while using opacity, it is not possible. Opacity will turn the whole block & its content to opacity: 0.2; if you use that.