• このエントリーをはてなブックマークに追加

今さらながら、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(Mozzila)向けの指定。
“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で透明度を指定する際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加

Related Posts

Trackback URL

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

SHARE

CSSで透明度/透過度(opacity)の指定をする方法

  • このエントリーをはてなブックマークに追加
Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR