html - CSS background-image-opacity?

Question

Related to How do I give text or an image a transparent background using CSS?, but slightly different.

I'd like to know if it's possible to change the alpha value of a background image, rather than just the colour. Obviously I can just save the image with different alpha values, but I'd like to be able to adjust the alpha dynamically.

So far the best I've got is:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

It works, but it's bulky and ugly, and messes things up in more complicated layouts.

Answer 1

You can do the faded background with CSS Generated Content

Demo at http://jsfiddle.net/gaby/WktFm/508/

Html

<div class="container">
        contents
</div>

Css

.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

But you cannot modify the opacity as we are not allowed to modify generated content..

You could manipulate it with classes and css events though (but not sure if it fits your needs)

for example

.container:hover:before{
    opacity:1;
}

UPDATE

You can use css transitions to animate the opacity (again through classes)

demo at http://jsfiddle.net/gaby/WktFm/507/

Adding

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

to the .container:before rule will make the opacity animate to 1 in one second.

Compatibility

• FF 5 (maybe 4 also, but do not have it installed.)
• IE 9 Fails..
• Webkit based browsers fail (Chrome supports it now v26 - maybe earlier versions too, but just checked with my current build), but they are aware and working on it ( https://bugs.webkit.org/show_bug.cgi?id=23209 )

.. so only the latest FF supports it for the moment.. but a nice idea, no ? :)