不透明度

要素の不透明度を操作します。

opacityプロパティは要素の不透明度を設定します。opacityは不透明度を表し、1は全く透明でなく、.5は 50%透明で、0は完全に透明です。

要素のopacityを設定するには.opacity-{value}ユーティリティを使用します。

100%

75%

50%

25%

<div class="opacity-100">...</div>
<div class="opacity-75">...</div>
<div class="opacity-50">...</div>
<div class="opacity-25">...</div>

CSS

不透明度ユーティリティはscss/_utilities.scssのユーティリティAPIで宣言されています。ユーティリティAPIの使い方はこちら

"opacity": (
  property: opacity,
  values: (
    0: 0,
    25: .25,
    50: .5,
    75: .75,
    100: 1,
  )
),