“opacity”と”rgba()”を使用した透明度の指定。

CSS3:opacityとrgba()を使用した透明度の指定。
今回は画像やボックスを半透明にする方法を紹介します。
使うのはCSS3。

使えるブラウザはIE9・Firefox・Chrome・Safari・Operaです。
また、-webkit-や-moz-のようなベンダープレフィックスの必要もないようです。

サンプル画像

これが二つの方法を用いて画像やらボックスを透過したものです。
まず、二つの違い。。
今回、opacityとrgba()二つの透明度の指定方法を紹介しますが、
・opacityプロパティは、要素の透明度を指定。
・rgba()は、RGBAカラーモデルで色を指定する。
この違いがあるんですね。

なので、
divやpで囲んだものや何か要素を半透明にしたいなー・・と思った時はopacity。
ここの●●色に指定した部分を半透明にしたいなー・・と思った時はrgba()。
こんな感じで分けて使うのが良いのではないでしょうか？

opacity

サンプルでは、猫の写真が入ったdiv全体を60％の半透明に。という指定をしています。

=css=

/*　(↓猫の入ったdiv名)　*/
div.img-box{
	width:361px;
	margin-left:30px;
	background-color:#FFF;
	padding:15px;
	opacity:0.6;　/*　←この部分！！　*/
}

opacity:0.6;この部分で透明度の指定をしています。
0.0が完全に透明、1.0は完全に”不”透明。

簡単ですね！
ボックス全体に透過が効きます。
なので文字もうっすら・・。

rgba()

こちらはサンプルの下の方。
猫の写真が入ったdivの背景色を60％の半透明に。という指定です。

=css=

/*　(↓猫の入ったdiv名)　*/
div.img-box{
	width:361px;
	margin-left:30px;
	padding:15px;
	background-color:rgba(0,0,255,0.6);　/*　←この部分！！　*/
}

background-color:rgba(0,0,255,0.6);この部分で透明度の指定をしています。
この指定、()の中身はこうなっています。
(赤,緑,青,透明度)

これまで色は#0000ffのように、16進数で指定することが多かったですね。
(#　00←赤色指定　00←緑色指定　ff←青色指定)のように。
#0000ffの色は青。

このffは10進数に変換すると255になるんです。
00は変換しても0のまま。
なので、rgba()で青を指定したい場合は(0,0,255,透明度);となるんです。
そして透明度の部分は、opacityの時と同じ。
0.0が完全に透明、1.0は完全に”不”透明。となります。

リファレンスサイトなどを見ると色の指定は0%-100%でも出来るというのを見つけました。
が、私的には16進数を10進数に変換した方が簡単だし正確なのではないか、と思いました。

ちなみに変換をパパッと済ませたいようであれば”16進数　変換”などのキーワードで調べればすぐに計算してくれるページがでてきます。

それから、rgba()はbackground-colorなど”color”を指定している部分に使えるので、背景だけではなくborderなどにもつかえますよ。
これなら中の画像や文字も薄くならずに済みますね！

/*************************/
そんなわけで、２種類の半透明にする方法を紹介しました。

IEでは実現できないバージョンのが多いですが、CSS3を使っていいのであれば使い道は結構あるのではないかと思います。
:hoverなどで指定して、ロールオーバーに使ってみてもいいかもしれませんね。

Similar Posts:

• 【Dreamweaver】閉じタグコメントを挿入出来る拡張機能
• ソースコードをハイライト表示できるWordPressのプラグイン SyntaxHighlighter
• FlashDevelop 3.0.0 RC4 にアップグレード
• FlashDevelop 3.0.0 RC5 のインストールと日本語化
• WordPress2.7の導入(9) ウィジェットの設定