概要
- opacityは要素の不透明度を設定します
- 子要素に別の opacity 値を設定することで、親要素との相対的な不透明度を変更できますが、最終的な表示は親要素の opacity 値に制限されます
- 親のみの背景の不透明度を変えたい場合は、backgroundプロパティでrgb()を使います
背景 🖼️
cssのスキルが皆無な為、今回は業務で見たopacityについて勉強します。
opacityとは 🕵️
要素の不透明度を設定します
| 値 | 意味 |
|---|---|
| 0 | 要素は完全に透明 |
| 0と1の間にある値 | Data 5 |
| 1（既定値） | 要素は完全に不透明透明 |
サンプルコードではボタンホバー時に透明度を増しています。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
親要素と子要素のopacityについて 🐳
親要素に opacity を設定すると、その要素と全ての子要素は、親要素の背景に対して同じ不透明度で表示されます。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
子要素に別の opacity 値を設定することで、親要素との相対的な不透明度を変更できますが、最終的な表示は親要素の opacity 値に制限されます。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
この例では
親要素は70%の不透明度で表示されます。
子要素は100%の不透明度を指定していますが、親要素の70%不透明度の制限を受けます。
結果として、子要素も親要素と同じ70%の不透明度で表示されます。
親のみの背景の不透明度を変えたい場合（ダイアログを例に）💡
親のみの背景の不透明度を変えたい場合は、backgroundプロパティを使います。
background: background:rgb(135, 206, 235,0.5)
4つ目の値で不透明度を指定できます。
See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.
「modal open」ボタンをクリックすると親の透明度が増しています。
モーダルを閉じたい時はescキーを押してください。
最後に
opacityについて少しは理解できました。