原文链接 https://blademainer.github.io/2013/11/14/2013-11-14-sl-alpha/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。
废话一下：
通常在网上搜索到的 CSS 透明的代码入下： .transparent { filter: alpha(opacity=50);/* IE6 / -moz-opacity: 0.5; / firefox / -khtml-opacity: 0.5; / safari / opacity: 0.5; / normal */ }
这段代码可以很轻松地解决透明的问题，只需要更改透明度就好了。 <!--more-->
CSS 中的 opactity 是有继承问题的。例如你的 Dom 结构如下： <div class="body"> <div class="cnt"> </div> </div> 假如你为 body 增加了如上 1 的透明样式之后，.body 的确透明了。而这个时候，你会发 现 .cnt 的块也变得 50% 透明了。假如你想通过重置样式来达到目的，不妨试试，你的 100% 的不透明，将会基于父节点的 50%的，也就是 50％*100%=50% 。
常见的解决方法，就是通过兄弟节点来解决继承的问题，并使用 position 属性来改 变层次。具体不多说。
解决方案:
原理：使用 CSS3 的 rgb，rgba 来解决现代浏览器中的背景透明问题，使用 ie 中的渐变
滤镜来解决 ie 中的透明问题。具体代码如下：
.sl-alpha {
background-color: rgb( 0, 0, 0 );
background-color: rgba( 0, 0, 0, 0.3 );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ff0000, endColorstr=#88ff00000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ff0000, endColorstr=#88ff00000)";
}