| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {opacity: 値 } |
| 値 の形式 | 透明度（ 0.0～1.0 ） | inherit |
| 初 期 値 | 1.0 |
| 対応ブラウザー | C3+ / e9+ / N2+ / Fx1+ / Op9+ / Ch1+ / Sa1.2+ |
| 適用可能な要素 | すべての要素 |
| 継 承 | しない |
opacityプロパティ は，要素の色について 透明度（アルファ値 = alpha value） を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| 透明度 | 透明度を 0.0～1.0 の数値で指定します。 1.0 は完全に不透明， 0.0 は完全に透明です。 |
| inherit | 親要素の opacityプロパティ の値を継承します。 |
| 備 考 | 負の値 を指定すると 0.0 が，また，1.0 より大きい値 を指定すると 1.0 が，それぞれ適用されます。 |
opacityプロパティ の初期値は 1.0 ですので，このプロパティを指定してない要素は常に 完全に不透明 です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample {
background-color: blue;
overflow: hidden;
}
div.sample div {
margin: 20px auto;
width: 200px;
padding: 10px;
text-align: center;
font-size: 20px;
background-color: yellow;
}
.opac1 { opacity: 1.0; }
.opac2 { opacity: 0.8; }
.opac3 { opacity: 0.6; }
.opac4 { opacity: 0.4; }
.opac5 { opacity: 0.2; }
.opac6 { opacity: 0; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample"> <div class="opac1">← { opacity: 1.0; } →</div> <div class="opac2">← { opacity: 0.8; } →</div> <div class="opac3">← { opacity: 0.6; } →</div> <div class="opac4">← { opacity: 0.4; } →</div> <div class="opac5">← { opacity: 0.2; } →</div> <div class="opac6">← { opacity: 0; } →</div> </div> |
| ブラウザー 表示例 |
|---|
← { opacity: 1.0; } →
← { opacity: 0.8; } →
← { opacity: 0.6; } →
← { opacity: 0.4; } →
← { opacity: 0.2; } →
← { opacity: 0; } →
|
↑ { opacity: 0; } とすると背景色で完全に塗りつぶされて見えなくなります。