背景半透明rgba最佳实践

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>