View on GitHub

透明度 (Opacity)

Control the opacity of elements.

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

opacity 屬性設置了元素的不透明度級別。不透明度級別描述了透明度級別，其中 1 一點都不透明，.5 表示 50% 可見，0 表示完全透明。

使用 .opacity-{value} 通用類別設定元素的 opacity。

100%

75%

50%

25%

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

Utilities API

Opacity 通用類別在 scss/_utilities.scss 中的 utilities API 宣告。了解如何使用 the utilities API.

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