背景半透明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>

运行代码