How to ensure transparency of browser transfer only for the background of an element?

Question

How to ensure transparency transparency only for the browser?

I want to provide transparency for the background ul { background: } , but I do not want to make the text inside ul li a {} transparent.

 ul { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } 

this code makes everything transparent http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/

Answer 1

You can use RGBA colors. I made an example for you:

http://jsfiddle.net/ypaTH/

 ul { background: rgba(255, 255, 255, 0.5) //white with opcaity of 50% } ul li { color: #fff; background: rgba(0, 0, 0, 0.5) //black with opcaity of 50% } 

here is a workaround for IE and a list of compatible ones: http://css-tricks.com/rgba-browser-support/