Solved

css2.0 make div background color semi transparent

Posted on 2011-03-10
6
604 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
  • 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 500 total points
ID: 35095113
Here's a link to an article that discusses the matter:
http://css-tricks.com/rgba-browser-support/

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

705 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now