Having reserve for RGBA transparent background in CSS

Question

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

Since I use a cross browser to test my website, I understand that rgba is not supported by IE8. So I would like to not have a milk layer at all when rgba is not supported. Here is what I tried as a backup:

 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); 

For all three attempts, I have a full empty layer on top of my image. How can i do 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 the demo at http://jsfiddle.net/audetwebdesign/DkRJs/

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

If older browsers do not support the pseudo-element, you will need to directly place it in the HTML code.

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

IE8 problem

I tested this in IE8 and realized that you need a filter property to make it fully backward compatible.

Answer 2

This is not perfect, but you can use transparent 1px by 1px png as a repeating background image. You can even do this with IE conditional comments to just target IE8.

You can also use:

 img:hover{opacity:0.8}