【SASS】 一个Opacity混合器（外加如何让背景透明 文字不透明）

下面就是我的这个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………浏览器中的 “ 背景 + 文字 ”全透明化，
而非我们所期望的只要背景透明，文字不透明。

截图：