cssのopacityについて理解する

:::note
概要
- opacityは要素の不透明度を設定します
- 子要素に別の opacity 値を設定することで、親要素との相対的な不透明度を変更できますが、最終的な表示は親要素の opacity 値に制限されます
- 親のみの背景の不透明度を変えたい場合は、backgroundプロパティでrgb()を使います

[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/opacity)
:::

# 背景 🖼️
cssのスキルが皆無な為、今回は業務で見たopacityについて勉強します。

# opacityとは 🕵️

https://developer.mozilla.org/ja/docs/Web/CSS/opacity

要素の不透明度を設定します

| 値 | 意味 |
|----------|----------|
| 0   | 要素は完全に透明   |
| 0と1の間にある値   | Data 5   |
| 1（既定値）   | 要素は完全に不透明透明   |

サンプルコードではボタンホバー時に透明度を増しています。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="PoMKZZL" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/PoMKZZL">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 親要素と子要素のopacityについて 🐳
親要素に opacity を設定すると、その要素と全ての子要素は、親要素の背景に対して同じ不透明度で表示されます。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="eYqEJWv" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/eYqEJWv">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

子要素に別の opacity 値を設定することで、親要素との相対的な不透明度を変更できますが、最終的な表示は親要素の opacity 値に制限されます。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="yLmoeoa" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/yLmoeoa">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


この例では
親要素は70%の不透明度で表示されます。
子要素は100%の不透明度を指定していますが、親要素の70%不透明度の制限を受けます。
結果として、子要素も親要素と同じ70%の不透明度で表示されます。

# 親のみの背景の不透明度を変えたい場合（ダイアログを例に）💡

親のみの背景の不透明度を変えたい場合は、backgroundプロパティを使います。
`background: background:rgb(135, 206, 235,0.5)`
4つ目の値で不透明度を指定できます。

https://www.sejuku.net/blog/84428#index_id0

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="NWQvxXq" data-pen-title="Untitled" data-user="uuylkesg-the-styleful" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/uuylkesg-the-styleful/pen/NWQvxXq">
  Untitled</a> by 山根大生 (<a href="https://codepen.io/uuylkesg-the-styleful">@uuylkesg-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

「modal open」ボタンをクリックすると親の透明度が増しています。
モーダルを閉じたい時はescキーを押してください。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

# 最後に
opacityについて少しは理解できました。

# 参考
- [MDN opacity](https://developer.mozilla.org/ja/docs/Web/CSS/opacity)
- [MDN dialog](https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog)
- [CSSで色・透明度を指定するrgbaプロパティの概要・使い方を徹底解説! | 侍エンジニアブログ](https://www.sejuku.net/blog/84428#index_id0)