背景半透明rgba最佳实践-优快云博客

本文详细介绍了在网页设计中如何正确使用rgba属性实现背景半透明效果，包括跨浏览器兼容性解决方案，确保不同浏览器下的良好展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

by 一丝


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>背景半透明rgba最佳实践</title>
    <style>
    </style>
  </head>
  <body>
    <div class="main">
      <div class="demo demo1"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
      <div class="demo demo2"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
    </div>  
  </body>
</html>


body { 
  background: url(http://ww4.sinaimg.cn/cmw205/90f78f62jw1eafnlnk7cqj20q00yon2w.jpg) no-repeat 50% 0;

}

.demo {
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin: 20px auto;
  border: 1px solid #000;
  text-align: center;
  color: green;
}

.demo1 {
  background:rgba(0, 0, 0, .3);
}

.demo2 {
  background:rgba(0, 0, 0, .3);
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
}

/* 
 * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除 
 * \9 代表 IE9 以下浏览器支持
 * :root 只有 IE9+ 以及其他现代浏览器支持
 * IE10 以上不再支持 filter
*/

:root * {
  filter: none\9 !important;
}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景半透明rgba最佳实践</title> <style> body { background: url(http://ww4.sinaimg.cn/cmw205/90f78f62jw1eafnlnk7cqj20q00yon2w.jpg) no-repeat 50% 0; } .demo { width: 100px; height: 100px; line-height: 100px; margin: 20px auto; border: 1px solid #000; text-align: center; color: green; } .demo1 { background:rgba(0, 0, 0, .3); } .demo2 { background:rgba(0, 0, 0, .3); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000'); } /* * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除 * \9 代表 IE9 以下浏览器支持 * :root 只有 IE9+ 以及其他现代浏览器支持 * IE10 以上不再支持 filter */ :root * { filter: none\9 !important; } </style> </head> <body> <div class="main"> <div class="demo demo1"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div> <div class="demo demo2"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div> </div> </body> </html>

运行代码