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(enabled=false);
  opacity: 1;
}

#transparent {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}