opacityとfilterの透過度を同時に調整する。

css scss sass

メニューバーのロールオーバー時のバーの画像変更はCSSスプライトか
opacityで透過度に変化を付けているパターンがあります。


後者の場合はIE6~8がopacityに非対応なので代わりにflterプロパティを使用します。


ただし、この2つのプロパティはそれぞれ透過度の入力単位が異なります。

  • opacityは0.0~1.0
  • flterは0~100%

これだと一々記述するのも面倒なのミックスインを使って異なる単位の両プロパティを簡単に変更できるようにしましょう。


scss

//引数の初期値を0.7に設定。
@mixin opa($rate: 0.7){
 opacity : $rate ;
 -ms-filter:"alpha(opacity = #{$rate * 100})";
}

li.btn a:hover{
 @include opa(0.2);
}



css(コンパイル後)

nav.info li {
  margin-left: 18px;
}

li.btn a:hover {
  opacity: 0.2;
  -ms-filter: "alpha(opacity = 20)";
}



今回は入力単位をopacityに合わせましたが、それぞれ入力しやすい方の単位の異なる方で書き換えましょう。