CSS3 OpacityとRGBA　要素の透明化と色の指定方法

今回は、CSS3の「色の指定方法（RGBA）」と「要素の透明化（Opacity）」について書きます。

CSS3では、RGBAカラーモデルが使えます。
RGBAカラーモデルは、RGBカラーモデルのred ,green ,blueに、alphaが加わったものです。
alphaは色の透明度を表します。

RGBAは、個別（背景色とか）に透明度を指定したい場合に使います。

このような形で指定します。

/*rgba(赤,緑,青,透明度);*/
rgba(0,0,0,0.4);

透明度は、0〜１で指定し、 RGBの色は0〜255、または、0%〜100%で指定します。

実際のプログラムでやると、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 200px;
	 	height: 200px;
	 	background-color: rgba(0,0,0,0.4);
	 	border: 5px solid red;
	 }

	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>

実行結果
f:id:gupuru:20140308225324p:plain

ちなみに、「rgb(0,0,0)」とするとこうなります。
f:id:gupuru:20140308225439p:plain

実行結果をみると、alpha（透明度）を指定すると真っ黒ではなく、薄い感じの黒色になってます。

次に、「opacity」について書きます。

「opacity」は、要素の透明度を指定します。
こちらを使うと、指定した要素を薄い感じにできます。

このように使います。

opacity: 0.54;

「opacity」の値は、0〜1で指定します。0に近くなるほど、透明度が増していきます。逆に、1に近くなるほど、濃くなります。

実際のプログラムでやると、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 200px;
	 	height: 200px;
	 	background-color: rgba(0,0,0,0.4);
	 	border: 5px solid red;
	 	opacity: 0.54;
	 }

	</style>
</head>
<body>
	<div id="maru"></div>
</body>
</html>