opacity_mixin

last update: 2013/02/21

#000 50% background-color #000 50% png-24

$view-ie8 : true;

@mixin opacity($ratio) {
  @if $view-ie8 {
    filter:progid:DXImageTransform.Microsoft.alpha(Opacity=#{$ratio * 100});
  }
  opacity: $ratio;
}

.foo {
  ・・・
  background: #000;
  @include opacity(0.5);
}
.bar {
  ・・・
  background: url(image) 0 0 no-repeat;
  @include opacity(0.5);
}

<span class="foo">#000 50% background-color</span>
<span class="bar">#000 50% png-24</span>