古い記事
ランダムジャンプ
新しい記事

CSSで半透明

2005-03-27-3 [Tips]
CSSで指定した箇所を半透明にするには、
IE なら alpha フィルター、FF なら -moz-opacity。
<style>
#sukesuke1 {
position:absolute;
padding:5px;
background-color:red;
filter:alpha(opacity=75); /*IE*/
-moz-opacity:0.75; /*FF*/
opacity:0.75;
}
</style>
<div id="sukesuke1">ザ・半透明</div>
設置例:
ザ・半透明
下に隠れている
部分です。

先日[2005-02-24-3]の似非Ajaxサンプルも半透明にしてみた。
ま、ともかく CSS3 の opacity まではこれだね。

参考:「JavaScript&DHTMLクックブック


追記: Firefox は opacity でOKだそうです。情報ありがとうございまし
た。ということで、前方互換のためにも opacity も追加しておきました。

追記050329: Safari 1.2.4 も opacity でOKだそうです。情報感謝!

追記060119: Opera 8.5 では非対応だそうです。情報感謝!


市瀬裕哉, 福島英児, 望月真琴 / 実践Web Standards Design-Web標準の基本とCSSレイアウト&Tips

加藤善規, 平澤隆, 両見 英世 / Web標準XHTML+CSSデザイン - クリエイターが身につけておくべき新・100の法則。
この記事に言及しているこのブログ内の記事