css背景色半透明的最佳实践
之前项目中遇到纯色的半透明背景，都是这么干：
<style> .box {width:300px;height:300px;position:relative;} .mask {width:300px;height:300px;position:absolute;z-index:1;background-color:#000;opacity:0.4;filter:alpha(opacity:40);} .content {width:300px;height:300px;position:absolute;z-index:2;} </style> <div class="box"> <div class="content">这里是内容</div> <div class="mask"></div> </div>
但是，最近项目中，遇到高度不是固定的，这种方法就不行了。我也想过用Png24图片实现半透明效果，但是要用到图片，而且还有狗日的ie6兼容问题，虽然也可以解决，但是麻烦。
那有木有更好的方法呢？？答案是肯定的，不然我写这篇文章干嘛。
<style> .box {width:300px;height:300px;background:rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000');} </style> <div class="box"> 就不告诉你这里是内容。 <div>
我们得到的效果是这样的，IE9 的透明度竟然有 60%!! 这显然不是我们想法的。原因是：IE9 也支持 filter，使得 filter 的结果和 background-color 叠加，所以是 60%。
解决方法必须有的：
.box{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#66000000', endColorstr='#66000000');background:rgba(0,0,0,0.4);}
:root .box{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');}/*for IE9*/
或者ie9的hack使用：
:root .box{filter:none;}/*for IE9*/
简单解释一下：
background:rgba(0,0,0,0.4);
css3的RGBA，依次是red，green，blue,alpha，最后一个alpha透明度。
filter 渐变滤镜详细用法，[参见这里]
StartColorStr 和 EndColorStr:
#4c000000 是 30% 透明度的 #000000 的意思
组成: # + 透明度 + 颜色
算法: Math.floor(0.6 * 255).toString(16);
filter 渐变滤镜的用法看不懂？？？没关系，我也不太懂，网上有工具，转换一下就可以了：
背景透明，内容不透明CSS代码生成器
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>背景透明，内容不透明CSS代码生成器</title>
<script>
if(window.top!=window){
window.top.location.href = window.location.href;
}
</script>
</head>
<body>
<style type="text/css">
#hananBackgroundColorOpacity{margin:10px;}
#hananBackgroundColorOpacity span{margin-left:10px; color:#8a8c8e;}
#hananBackgroundColorOpacity textarea{width:650px; height:120px; padding:5px; color:#fff; background:#000;}
#hananBackgroundColorOpacity strong{color:#000;}
#hananBackgroundColorOpacity h3{color:#000; border-bottom:1px solid #ccc; line-height:57px;}
#hananBackgroundColorOpacity h3 img{ float:right;}
#hananBackgroundColorOpacity h3 .c{ clear:both; height:0px;margin:0;padding:0;}
#hananBackgroundColorOpacity .hanan_introduction,#hananBackgroundColorOpacity .hanan_introduction a{ font-size:12px; color:#6E6E6E; }
#hananBackgroundColorOpacity img{border:none;}
</style>
<div id="hananBackgroundColorOpacity">
<p class="hanan_introduction ">
说明：为页面元素添加背景透明，内容不透明的效果，兼容IE6/7/8/9/10、Chrome、Firefox、Safari、Opera。
</p>
<p>选择器：<input id="hananDomChooser" type="text" value="" /><span>id或者class等CSS选择器,比如:<strong>#abc</strong></span></p>
<p>颜色值：<input id="hananColorValue" type="text" value="" /><span>16进制颜色值,不带#号,比如:<strong>#c77eb5</strong>,请填:<strong>c77eb5</strong></span></p>
<p>透明度：<input id="hananOpacity" type="text" value="" /><span><strong>0</strong>到<strong>1</strong>之间,比如:<strong>0.5</strong></span></p>
<p><input id="hananGetCssCodeButon" type="button" value="生成CSS代码" /></p>
<p>
CSS代码：<br/>
<textarea id="hananCssCode" type="text"/></textarea>
</p>
<p class="hanan_introduction ">
实现原理参考：<a href="http://www.cssha.com/through-the-ie-private-filter-let-ie6-ie7-ie8-support-transparent-background" target="_blank">http://www.cssha.com/through-the-ie-private-filter-let-ie6-ie7-ie8-support-transparent-background</a>
</p>
</div>
<script type="text/javascript">
// <![CDATA[
function hananColorToRGB(col,opa){
var c = col
var R = parseInt(c.substring(0,2),16), G = parseInt(c.substring(2,4),16), B = parseInt(c.substring(4),16);
return 'rgba(' + R + ',' + G + ',' + B + ','+ opa +')' ;
}
function smallToBig(col){
var str = '';
if(col.length==6){
str = col;
}else{
var _r = col.substring(0,1), _g = col.substring(1,2), _b = col.substring(2);
_r += _r;
_g += _g;
_b += _b;
str = _r + _g + _b;
}
return str;
}
function hananGetCssCode(){
var chooser = document.getElementById('hananDomChooser').value;
var col = smallToBig(document.getElementById('hananColorValue').value);
var opa = document.getElementById('hananOpacity').value;
var rgb = hananColorToRGB(col,opa);
var iecol = parseInt((opa*255)).toString(16) + col;
if(chooser=='' || col=='' || opa==''){
alert('选择器、颜色值、透明度都要填完哦亲！');
}else{
document.getElementById('hananCssCode').value = chooser +'{background:' + rgb + ';filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#' + iecol + ',endColorstr=#' + iecol + ');zoom:1;}'+
'\r\n:root ' + chooser +'{filter:none\\9;}/*for IE9*/';
}
}
window.onload = function (){
document.getElementById('hananGetCssCodeButon').onclick = function(){
hananGetCssCode();
}
}
// ]]>
</script>
</body>
</html>
