<alpha-value>
The <alpha-value>
CSS data type represents a value that can be either a <number>
or a <percentage>
, specifying the alpha channel or transparency of a color.
Syntax
The value of an <alpha-value>
is given as either a <number>
or a <percentage>
.
If given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. Values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1.
If the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.
Interpolation
When animated, values of the <alpha-value>
CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the timing function associated with the animation.
Examples
Setting text color opacity
Here an alpha value is used to set partially transparent text:
/* <rgba()> */
color: rgba(34, 12, 64, 0.6);
color: rgba(34.0 12 64 / 60%);
Setting shape image threshold
Here an alpha value is used to determine which parts of an image are considered part of a shape:
/* shape-image-threshold */
shape-image-threshold: 70%;
shape-image-threshold: 0.7;
Specifications
Specification |
---|
CSS Color Module Level 4 # type-def-alpha-value |