Having a fallback for a transparent background RGBA background in CSS

Question

I have a div over an image that I use on hover to have some kind of milky layer, which I get with background-color:rgba(255,255,255,0.1).

As I am cross browser testing my web site, I realize that rgba is not supported by IE8. So what I would like is not to have the milky layer at all when rgba is not supported. Here below what I tried as fallback:

1/ background-color:rgba(255,255,255,0.1);

2/ background-color:transparent; background-color:rgba(255,255,255,0.1);

3/ background-color:none; background-color:rgba(255,255,255,0.1);

With all three tries, I have a full blank layer over my image. How can I accomplish this?

Answer 1

I think the following will work.

Wrap the image in a container:

<div class="img-overlay">
    <img src="http://placekitten.com/200/200">
</div>

apply the following CSS:

.img-overlay {
    border: 1px solid blue;
    float: left;
    position: relative;
}
.img-overlay:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    filter: alpha(opacity=40); /* internet explorer */
    opacity: 0.4; /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
    display: block;
} 

See demo at http://jsfiddle.net/audetwebdesign/DkRJs/

The idea is to use absolute positioning to position an element over the image and then apply the opacity property.

If the older browsers don't support the pseudo element, you will need to place in the HTML code directly.

Note: I just reread the original question and realized that I solved the wrong problem. Sorry for the inconvenience.

IE8 Issue

I tested this in IE8 and just realized that you need the filter property to make it fully backwards compatible.

Answer 2

It's not ideal but you could use a 1px by 1px transparent png as a repeating background image. You could even do this using IE conditional comments so as just to target IE8.

You could also use:

img:hover{opacity:0.8}