Backgrounds

Background Opacity v1.0.8

Utilities for sets opacity of background color.

Class

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