Press/to search

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>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'bg-opacity',
$property: --bg-opacity,
$modifier: (
10: .3,
20: .2
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.