"SASS" a opacity mixer (plus how to make the background transparent text opaque)

Here's my opacity Mixins code, which supports IE, FireFox, Chrome, and Safari: Sass opacity Mixer:

@mixin Opacity ($value) {
  $IEValue: $value *100;  opacity: $value;
  Background-color:agba (', $value);
  -ms-filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=" + $IEValue + ")";
  Filter:alpha (opacity= $IEValue);
}

Use

As with other mixers, use @include calls directly:

@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);}}

Transparent background text opaque

In newer browsers such as Ff/chrome, you can use the CSS properties Background-color Rgba to easily achieve background transparency, while text remains opaque.

The IE6/7/8 browser does not support RGBA, only using IE's exclusive filter filter:alpha, but this will make the text transparent, so only the child nodes of the transparent container (except the text node) set position: Relative to not inherit the transparent filter of its parent element

In addition, it should be noted that for opacity: * *; should be used. Because, it will let in chrome/ie/360 ... The "background + text" in the browser is fully transparent,
Rather than what we expected as long as the background is transparent, the text is opaque. screenshot: