在使用 css 编辑页面的时候,可能你会遇到半透明的令人头疼的问题。为了达到兼容性好的目的,经过不断的 debug,我们得出了这样的解决方案。
废话一下:
1. 通常在网上搜索到的 CSS 透明的代码入下:
1.transparent {
2 filter: alpha(opacity=50);/* IE6 */
3 -moz-opacity: 0.5; /* firefox */
4 -khtml-opacity: 0.5; /* safari */
5 opacity: 0.5; /* normal */
6}
这段代码可以很轻松地解决透明的问题,只需要更改透明度就好了。
- CSS 中的 opactity 是有继承问题的。例如你的 Dom 结构如下:
1<div class="body">
2 <div class="cnt">
3 </div>
4</div>
假如你为 body 增加了如上 1 的透明样式之后,.body 的确透明了。而这个时候,你会发现 .cnt 的块也变得 50% 透明了。假如你想通过重置样式来达到目的,不妨试试,你的100% 的不透明,将会基于父节点的 50%的,也就是 50%*100%=50% 。
- 常见的解决方法,就是通过兄弟节点来解决继承的问题,并使用 position 属性来改变层次。具体不多说。
解决方案:
原理:使用 CSS3 的 rgb,rgba 来解决现代浏览器中的背景透明问题,使用 ie 中的渐变滤镜来解决 ie 中的透明问题。具体代码如下:
1.sl-alpha {
2 background-color: rgb( 0, 0, 0 );
3 background-color: rgba( 0, 0, 0, 0.3 );
4 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ff0000, endColorstr=#88ff00000);
5 -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ff0000, endColorstr=#88ff00000)";
6}
--- 完 ---
转自:http://www.pizn.me/2011/10/11/sl-alpha.html