?
Solved

css2.0 make div background color semi transparent

Posted on 2011-03-10
6
Medium Priority
?
643 Views
Last Modified: 2012-05-11
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.
0
Comment
Question by:dizzycat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 12

Expert Comment

by:Amick
ID: 35094996
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

0
 

Author Comment

by:dizzycat
ID: 35095025
Could you show me an example of RGBA.
0
 
LVL 12

Accepted Solution

by:
Amick earned 2000 total points
ID: 35095113
Here's a link to an article that discusses the matter:
http://css-tricks.com/rgba-browser-support/

0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 12

Expert Comment

by:Amick
ID: 35095275
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.
0
 

Author Closing Comment

by:dizzycat
ID: 35095339
Works great thankyou Amick.
0
 
LVL 12

Expert Comment

by:Amick
ID: 35095357
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

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question