背景色や画像などの要素を半透明にするには、「opacity」を使用します。
構文
opacityの構文です。
opacity:＜値＞;
＜値＞には以下の値を指定できます。
| 数値 | 透明度を指定する （0.0「完全に透明」～1.0「不透明」） |
|---|---|
| inherit | 親要素の透明度を継承する |
サンプルソース
例）透明度を100%（= opacity:0.0）とする
|
1 |
<p style="background-color:red; opacity:0.0;">透明度100%です</p> |
（結果）
透明度100%です
文字も含めて完全に透明になります。
例）透明度を50%（= opacity:0.5）とする
|
1 |
<p style="background-color:red; opacity:0.5">透明度50%です</p> |
（結果）
透明度50%です
例）透明度を0%（= opacity:1.0）とする
|
1 |
<p style="background-color:red; opacity:1.0;">透明度0%です</p> |
（結果）
透明度0%です
メモ
- opacityは色だけでなく、画像などにも指定可能です。
コメント