CSS Opacity
This property tells how clear are you going to see some elements. This property specifies the transparency or opacity of an element.
The value of this property can range from 0.0 to 1.0.
If the value of the opacity is 0, it means that the element is completely transparent, and an opacity value of 1 means that the element is completely non – transparent.
You can refer to the below code to understand the opacity in a better way. For example, we are considering an image, and making its opacity to some value between 0.0 and 1.0, let’s say 0.5. Let’s have a look at the code, and how does the image looks like –
So, we have created a class, with the name opacity1, with which, we are setting the opacity to 0.5 for example. Now, whatever element that belongs to this class, is going to have an opacity of 0.5. We have the heading and an image, which have the class opacity1. If we open the file in the browser, the output is going to be something like this –
If the opacity were 1, then the image and the heading would look something like this –
And, if you set the opacity to 0, then the image will become completely transparent, which means that the image and text would not be visible.
