Advanced Search

Return to Snippet

Revision: 34194
at October 19, 2010 06:49 by adamcoulombe
Updated Code 
<!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>

Revision: 34193
at October 19, 2010 05:55 by adamcoulombe
Initial Code 
<!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>Untitled Document</title>
<style type="text/css">
.color-block {
padding:100px;
	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,endColorstr=#7Fff0000);
   zoom: 1;
} 



</style>
<![endif]-->
</head>

<body>
<div class="color-block">This box has a semi-transparent background, but it's content is fully opaque </div>
</body>
</html>
Initial URL 
http://adamcoulombe.info/lab/css/background-transparency.html
Initial Description 
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!
Initial Title 
Cross-Browser CSS Transparent Background Color
Initial Tags 
css, background
Initial Language 
CSS