CSS: Opacity
Here is text on top of a image. The text's background has increasingly higher opacity.
0.0
0.2
0.4
0.6
0.8
1.0
RGB Syntax
rgba(red, green, blue, opacity)
- opacity should be from 0 to 1.
- red, green, blue each can either be a integer from
0to255, or a percentage from0%to100%.
Example:
p.x { color: rgb(255, 192, 203, 0.5) }
p.y { color: rgb(100%, 75%, 79%, 0.5) }
HSL Syntax
hsla(hue, saturation, lightness, opacity)
- opacity should be from 0 to 1.
- hue should be from 0 to 360.
- saturation, lightness must be from
0%to100%.
Example:
div {background-color:hsla(120, 100%, 50%, 0.3)}
[see CSS: HSL Color]
Browser Support
Supported in all browsers as of 2012-04-20.
