CSS opacity property is used to adjust the transparency of an element. It can be used to make an element transparent or semi-transparent. The value of the opacity property ranges from 0 to 1, where 0 is completely transparent and 1 is completely opaque.
Example:
div {
opacity: 0.5; /* semi-transparent */
}In addition to the opacity property, CSS also provides the RGBA and HSLA color formats that allow specifying the alpha channel (transparency) of a color. The alpha channel is a value between 0 and 1, where 0 is completely transparent and 1 is completely opaque.
Example:
div {
background-color: rgba(255, 255, 255, 0.5); /* semi-transparent white */
}In the above example, the alpha value of 0.5 makes the background color of the div element semi-transparent.
CSS opacity can be applied to any element, including text, images, and backgrounds. It can be useful for creating overlay effects, creating a watermark effect, or improving the readability of text on a busy background. However, it is important to use opacity sparingly and judiciously, as it can negatively affect the usability and accessibility of a webpage.