Cross-Browser CSS Transparent Background Color


/ Published in: CSS
Save to your folder(s)

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!


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Cross-Browser CSS Background Transparency</title>
  6. <style type="text/css">
  7. body { font-family:Arial, Helvetica, sans-serif; }
  8. .flower {color:#FFF; background-image:url(http://farm5.static.flickr.com/4114/4762615378_b092626018.jpg); width:440px; height:313px; padding:10px;}
  9. .color-block {
  10. padding:35px;
  11. background-color: #ff0000;
  12. background-color: rgba(255, 0, 0, 0.5);
  13. }
  14.  
  15. </style>
  16. <!--[if IE]>
  17. <style type="text/css">
  18.  
  19. .color-block {
  20. background:transparent;
  21. filter:progid:DXImageTransform.Microsoft.Gradient(
  22. GradientType=0,
  23. startColorstr=#7fff0000, /* first two digits are a hex value [0-255] for transparency (7F = 50% Opacity. FF = 100% Opacity. 00 = 0% Opacity. ) */
  24. endColorstr=#7Fff0000
  25. );
  26. zoom: 1;
  27. }
  28.  
  29.  
  30.  
  31. </style>
  32. <![endif]-->
  33. </head>
  34.  
  35. <body><div class="flower">
  36. <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>
  37. </body>
  38. </html>

URL: http://adamcoulombe.info/lab/css/background-transparency.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.