Link to home
Start Free TrialLog in
Avatar of dizzycat
dizzycat

asked on

css2.0 make div background color semi transparent

Hi experts

Using css2.0 is there any way that i can make a div background color semi-transparent, I have to use css2.0 because i am using Visual Web Developer 2008 which only seems to support css2.0.
Avatar of Amick
Amick
Flag of United States of America image

All modern browsers, including IE9, support RGBA (Red,Green, Blue, Alpha).  
For really old browsers you will want to include a fallback color.

Here's a workaround for older versions of IE.
<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Open in new window

Avatar of dizzycat
dizzycat

ASKER

Could you show me an example of RGBA.
ASKER CERTIFIED SOLUTION
Avatar of Amick
Amick
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
The W3C has a demo page at http://www.w3.org/Talks/2003/0521-CSS-WWW2003/opacity2.html that shows using a transparent .png background as a backup for rgba.  This might be useful to you as well.
Works great thankyou Amick.
Here's some code to play around with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>RGBA Div Example</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style type="text/css">
.alphaExample {background-color:rgba(32,128,27,.2);}
</style>
</head>

<body>

<div class="alphaExample">
<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>

</div>

<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor</b>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. </p>


</body>
</html>

Open in new window