下面就是我的这个Opacity mixins的代码,它支持IE, FireFox, Chrome 以及Safari:
Sass Opacity混合器:
@mixin Opacity($value){
$IEValue: $value*100;
// opacity: $value;
background-color: agba('', $value);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
filter: alpha(opacity=$IEValue);
}
使用
使用就跟其他混合器一样,直接用@include调用即可:
@import "compass/reset";
@import "mixins";
body {
background-color: #109d6d;
position: relative;
main {
width: 80%;
height: 50%;
margin: 100px auto;
text-align: center;
@include Opacity(1);
h1 {
position: relative;
background-color: #ed4f4f;
font-size: 60px;
padding: 50px;
color: #fff;
@include Opacity(.4);
}
}
}
背景透明 文本不透明
在 FF / Chrome 等较新的浏览器中可以使用css属性background-color
的rgba
轻松实现背景透明,而文字保持不透明。
而 IE6 / 7 / 8 浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha
来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position: relative
才能不继承其父元素的透明滤镜
另外,应该注意的还有,对于 opacity : ** ; 应该谨用。因为,它会让在chrome / IE / 360………浏览器中的 “ 背景 + 文字 ”全透明化,
而非我们所期望的只要背景透明,文字不透明。