今さらながら、Webページ内の要素に対して、要素の透明度／透過度をCSSのみで指定する方法について。
久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。
CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。
◆CSS
div {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
『filter:alpha(opacity=50);』
これはIE向けの指定。
“50”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』
これはFirefox（Mozilla）向けの指定。
“0.5”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』
これはSafariやOpera向けの指定。
“0.5”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「opacity:1;」。
例えば、これらを使って単純な透過ロールオーバーを作る場合は以下の様な記述になります。
a {
margin: 0 auto;
width: 200px;
height: 200px;
background: #000;
display: block;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a:hover {
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
実際の動作は以下の様になります。
（透過部分にマウスオーバーしてください。）
透過の指定については、jQueryやCSS3で指定する場合は「opacity」プロパティのみで設定可能になります。
CSSで透明度を指定する際に是非。。。