…ここからが続き

Opacity プロパティ

対応ブラウザ（2011 4/1 現在）

Firefox 2以上，Safari 2以上，Opera 9以上，IE8以上，Chrome

指定方法・適用できるCSSプロパティ

値には，コンマ（.）を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定することも出来ます。

border、padding、background、img、テキスト、他のプロパティ

html

<div class="demo">
	<p class="opacity">background: #333;<br>
	padding: 10px;<br>
	border: 5px solid #000;<br>
	color: #fff;<br>
	opacity: 0.6</p>
</div>

css

.demo	{
	background: url(images/bg1.gif);
	padding: 10px;
	margin-bottom: 10px;
}
.opacity	{
	background: #333;
	padding: 10px;
	border: 5px solid #000;
	color: #fff;
	opacity: 0.6;
}

Opacity プロパティのデモページ

RGBa プロパティ

対応ブラウザ（2011 4/1 現在）

Firefox 3以上，Safari 3以上，Opera 10以上，IE8以上，Chrome

指定方法・適用できるCSSプロパティ

値には，コンマ（.）を使って指定します。「0.1」「0.8」「0.555」と小数点以下を指定することも出来ます。

border-color、background-color、color

html

<h2>background-color</h2>
<div class="demo">
	<p class="rgba1">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid #000;<br>
	color: #fff;</p>
</div>

<h2>border-color</h2>
<div class="demo">
	<p class="rgba2">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid rgba(0,0,0,0.6);<br>
	color: #fff;</p>
</div>

<h2>color</h2>
<div class="demo">
	<p class="rgba3">background-color: rgba(51,51,51,0.6);<br>
	padding: 10px;<br>
	border: 5px solid rgba(0,0,0,0.6);<br>
	color: rgba(255,255,255,0.6);</p>
</div>

css

.demo	{
	background: url(images/bg1.gif);
	padding: 10px;
	margin-bottom: 10px;
}
.rgba1	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid #000;
	color: #fff;
}
.rgba2	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid rgba(0,0,0,0.6);
	color: #fff;
}
.rgba3	{
	background-color: rgba(51,51,51,0.6);
	padding: 10px;
	border: 5px solid rgba(0,0,0,0.6);
	color: rgba(255,255,255,0.6);
}

RGBa プロパティのデモページ

おまけ

RGBa は CSS3 の text-shadow、box-shadow にも適応させる事が出来ます。

両方非常に分かりにくいですが、デモも作っておきました。

html

<div class="demo">
    <p class="text-shadow">background-color: rgba(51,51,51,0.8);<br>
    padding: 10px;<br>
    font-weight: bold;<br>
    color: #fff;<br>
    text-shadow: 3px 3px 1px rgba(255,0,0,0.6);</p>
</div>

<div class="demo">
    <p class="box-shadow">background-color: rgba(51,51,51,0.8);<br>
    padding: 10px;<br>
    color: #fff;<br>
    -webkit-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);<br>
    -moz-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);</p>
</div>

css

.text-shadow	{
	background-color: rgba(51,51,51,0.8);
	padding: 10px;
	font-weight: bold;
	color: #fff;
	text-shadow: 3px 3px 1px rgba(255,0,0,0.6);
}
.box-shadow	{
	background-color: rgba(51,51,51,0.8);
	padding: 10px;
	color: #fff;
	-webkit-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);
	-moz-box-shadow: 3px 3px 5px rgba(255,0,0,0.6);
}