Backgrounds

Background Opacity v1.0.8

Utilities for sets opacity of background color.


Class

classcss
bg-opacity-0--bg-opacity: 0
bg-opacity-25--bg-opacity: .25
bg-opacity-50--bg-opacity: .5
bg-opacity-75--bg-opacity: .75
bg-opacity-100--bg-opacity: 1

Usage

Set background-color with 100% opacity to an element.

<!-- Example -->
<y class="bg-amber-500 bg-opacity-100 ... h-32 w-64"></y>

Set background-color with 75% opacity to an element.

<!-- Example -->
<y class="bg-amber-500 bg-opacity-75 ... h-32 w-64"></y>

Set background-color with 50% opacity to an element.

<!-- Example -->
<y class="bg-amber-500 bg-opacity-50 ... h-32 w-64"></y>

Set background-color with 25% opacity to an element.

<!-- Example -->
<y class="bg-amber-500 bg-opacity-25 ... h-32 w-64"></y>

Set background-color with 0% opacity to an element.

<!-- Example -->
<y class="bg-amber-500 bg-opacity-0 ... h-32 w-64"></y>

Customize More

// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'bg-opacity',
//variant: 'responsive',
property: '--bg-opacity',
modifier: (
'30': '.3',
'40': '.4'
//...
)
)
)

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled