Posted By

adamcoulombe on 10/19/10

Tagged

Versions (?)

Last Edited at 10/19/10 05:55am

Statistics

Viewed 888 times

Favorited by 0 user(s)

Related snippets

Cross-Browser CSS Transparent Background Color

/ Published in: CSS

demo at http://adamcoulombe.info/lab/css/background-transparency.html ... Give an element a background color transparency without affecting the opacity of child or descendant elements. This is a no-PNG method!

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross-Browser CSS Background Transparency</title>
<style type="text/css">
body { font-family:Arial, Helvetica, sans-serif; }
.flower {color:#FFF; background-image:url(http://farm5.static.flickr.com/4114/4762615378_b092626018.jpg); width:440px; height:313px; padding:10px;}
.color-block {
	padding:35px;
	background-color: #ff0000;
	background-color: rgba(255, 0, 0, 0.5); 
}
 
</style>
<!--[if IE]>
<style type="text/css">
 
.color-block {
   background:transparent;
   filter:progid:DXImageTransform.Microsoft.Gradient(
                                                GradientType=0, 
                                                startColorstr=#7fff0000, /* first two digits are a hex value [0-255] for transparency (7F = 50% Opacity. FF = 100% Opacity. 00 = 0% Opacity. ) */
                                                endColorstr=#7Fff0000
                                            );
   zoom: 1;
} 
 
 
 
</style>
<![endif]-->
</head>
 
<body><div class="flower">
<div class="color-block"><strong>CSS Transparent Background Color</strong><br />This box has a semi-transparent background, but it's content is fully opaque </div></div>
</body>
</html>