Question: How to make html div transparent or semi-transparent using simple CSS?

Wouldn’t be it nice, if you can make html div or span transparent or semi-transparent? Here is the simple CSS tricks which do just that. Moreover it is cross browser compliant.

Use following CSS to give DIV transparency

.transparent
{
   filter:alpha(opacity=60);
   -moz-opacity: 0.6;
   opacity: 0.6;
}

You now need to just call this class like..

<div class="transparent">A transparent div.</div>

This will make your div transparent or semi-transparent as you wish.

Internet Explorer uses filter and firefox uses moz-opacity. The opacity value changes from 0 to 1.