Backgrounds
Background Opacity v1.0.8
Utilities for sets opacity of background color.
Class
class | css |
---|---|
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |