How to use the opacity attribute in CSS

This article mainly introduces how to use the opacity attribute in CSS, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

How to use the opacity attribute

The description is as follows

Opacity: valu

In the values section, you can use values from 0.0 to 1.0 to specify opacity. The larger the number, the higher the opacity and the clearer the display. In contrast, the smaller the number, the lower the opacity and the more blurred the display. In addition, if you enter inherit for the value, the value of the parent element is inherited.

Even if it is set outside the range of 0.0 to 1.0, it can be applied within this range (for example:-1 → 0 → 2 → 1) to set the opacity to 0 to make it completely transparent and disappear from the screen.

When the opacity is set to 1, it becomes completely opaque. (initial value)

Next, let's look at a concrete example of the opacity property.

When the value is the decimal point

The code is as follows

HTML code

When the value is a decimal

CSS code

Div {background-color:#b0e0e6;}

P {opacity:0.5;}

Here, we're in the area.

Enter text in the paragraph with a background color of # b0e0e6, and set the

The opacity value is set to 0.5

The opacity of the character part of the paragraph has changed, and it shows a little transparency. In addition, because the opacity is not set in the area, the opacity of the background color does not change.

Thank you for reading this article carefully. I hope the article "how to use opacity attributes in CSS" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!