How to set transparency and opacity in CSS

CSS is a widely used style sheet language, mainly used to add styles to files such as HTML, XHTML and XML. In CSS, transparency controls the opacity of an element in order to create a visual effect by changing colors and blending elements. In this article, we will discuss how to use transparency and opacity in CSS.

Transparency

Transparency is the degree of opacity or visibility of an element. This property is set by "opacity" in CSS and ranges from a number between 0 and 1. An element with a transparency of 0 will not be visible, while a transparency of 1 will make the element completely opaque. Additionally, you can use a decimal value, such as 0.5, to obtain a degree of transparency between fully transparent and fully opaque. Here is an example:

div {
    opacity: 0.5;
}

In this example, the "div" element will only be considered semi-transparent, i.e. 50% opacity.

Application examples of transparency:

• Change solid colors to translucent colors to enhance UI design. During the design process, you can use translucent colors to enhance contrast between elements and make them more legible.
• Used for website background image and video transparency conversion. When there is a need to create a transition between background and content, this can be easily achieved by using transparency with website background images and videos.
• Used for the navigation menu of the website. Use transparency to create a beautiful menu effect. You can make the menu background transparent so that more content can be seen against the background of other elements on the page.

Opacity

Opacity is the exact opposite of transparency. Opacity defines the fully opaque state of an element. In CSS, using the "rgba" or "hsla" functions sets opacity and allows the user to set a combined color and transparency value. The opacity of two elements can be combined to create a new color that is both the blend color of the blended element while maintaining the original brightness and contrast. Here is an example using "rgba" and "hsla":

div {
    background-color: rgba(255, 255, 255, 0.5);
    background-color: hsla(0, 0%, 100%, 0.5);
}

In this example, the background color is set to 50% opacity. This means that the background color mixes with other elements on the page to produce a new color.

Application examples of opacity:

• The background color is set to completely opaque to achieve different visual effects. For example, in a design, you can use opacity to reduce the brightness of a background image so that it fits in better with other elements.
• Used as a cover for UI design elements such as cards. By setting the cover to fully opaque, you can make UI elements such as cards appear clearer, while also preventing uncovered parts from being visible underneath other elements.
• Specify a transparent text box to allow background elements to penetrate. When you need to add a text box and also need to allow elements on the page to penetrate it, you can set the opacity of the text box to 0 to allow background elements to penetrate.

Summary

Transparency and opacity are both great features in CSS. In UI design, using these features can easily create continuous color changes and contrast effects, while also increasing the visibility of page content in some cases. No matter where you use transparency and opacity, it's important to understand their basic principles.

The above is the detailed content of How to set transparency and opacity in CSS. For more information, please follow other related articles on the PHP Chinese website!