Demo: Opacity

<div class='opacity-example' id='opacity-10'></div>
<div class='opacity-example' id='opacity-20'></div>
<div class='opacity-example' id='opacity-50'></div>
<div class='opacity-example' id='opaque'></div>
<div class='opacity-example' id='transparent'></div>

#opacity-10.opacity-example
#opacity-20.opacity-example
#opacity-50.opacity-example
#opaque.opacity-example
#transparent.opacity-example

@import "compass/css3";

.opacity-example {
  background: red;
  width: 40px;
  height: 40px;
  float: left;
}

#opacity-10 {
  @include opacity(0.1);
}

#opacity-20 {
  @include opacity(0.2);
}

#opacity-50 {
  @include opacity(0.5);
}

#opaque {
  @include opaque;
}

#transparent {
  @include transparent;
}

@import compass/css3

.opacity-example
  background: red
  width: 40px
  height: 40px
  float: left

#opacity-10
  +opacity(0.1)

#opacity-20
  +opacity(0.2)

#opacity-50
  +opacity(0.5)

#opaque
  +opaque

#transparent
  +transparent

.opacity-example{background:red;width:40px;height:40px;float:left}#opacity-10{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10);opacity:0.1}#opacity-20{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);opacity:0.2}#opacity-50{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5}#opaque{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}#transparent{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}