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>

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.