Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

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

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


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

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

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

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

透明度は、0〜1で指定し、 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>

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



まとめると・・・
opacityは、指定した要素全体を透明にするのに使います。
RGBAは、個別に適応したい場合に使います。


参考サイト


広告を非表示にする