Color opacity
Change the opacity of a background or text color.
Overview
The bg-opacity and text-opacity aliases adjust the opacity of the CSS background-color and a color (text) properties by changing the a (alpha) channel of the CSS rgba() function. For example, using bg-opacity(0.5) on rgba(0, 20, 40, 1) changes the alpha channel from 1 to 0.5, resulting in the more transparent background color: rgba(100, 120, 140, 0.5).
Syntax
Default
The default {bg|text}-opacity parameters:
| Name | Default value | Accepted values |
|---|---|---|
{bg|text}-opacity |
0 |
0-1 |
Examples
These examples show the bg-opacity and text-opacity aliases in action using the hover trigger, but you can use any of the supported triggers.
bg-opacity
The bg-opacity alias changes the opacity of a background color by specified amount.
text-opacity
The text-opacity alias changes the opacity of a text color by specified amount.
Triggers
Since you can use any of the supported triggers, here are a couple of usage examples:
Active
The active trigger is executed when the user clicks and holds (or taps) the element, then reverts upon release.
Scroll
You can even control the progression of the opacity effect based on the scroll position.
Mouse
Similar to above, you can use a mouse or pointer trigger to control the progression of an effect.
Options
All property options passed in the <> are supported.