CSSで半透明を実現(IE,Firefox,Opera,Safari対応)

2009 年 3 月 14 日 - ホームページ製作に役立つhtml&cssのmemo

CSSで半透明にするって技。

いろいろ使えると思います。ロールオーバー画像を作るのが面倒くさいとき等。

但し、それぞれのブラウザに対応したスタイルシート(CSS)が必要。

実装する場合は

============================
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.50; /*FF*/
opacity:0.50;
============================

+IEのみ下記のいづれかを指定しないと半透明になりません。

display:inline-block;
height:実際の値;
width:実際の値;
float:left または right;
position:absolute;
writing-mode:tb-rl;
zoom:任意の値;

どれにしようか、悩んでいる方は
zoom:1.0;
でOK

それで、ロールオーバー画像が作るの面倒くさくて、マウスオンでとりあえず半透明になればいいやって場合、

#ID名前 a:hover{
zoom:1.0;
filter:alpha(opacity=50); /*IE*/
-moz-opacity:0.50; /*FF*/
opacity:0.50;
}

でいいと思う。

ちなみに

filter:alpha(opacity=50); /*IE*/
はIEに利いてます。値が100で100%です。

-moz-opacity:0.50; /*FF*/
はFirefoxに利いてます。値が1で100%です。

opacity:0.50;
はオペラとサファリに利いてます。値が1で100%です。

電話代行・秘書代行

コメントを残す