21) Opacity.css

1) Definition:
The opacity property is used to define transparency for elements.
You can specify any value between 0.0 and 1.0.
Here, 0 is fully transparent, 0.5 is semi-transparent and 1 is fully opaque.

HTML:
<button id="first">
  Click me first
</button>

CSS:
#first {
opacity: 0.5
}

When we set the opacity for a parent element, all the child elements also inherit the same value
The opacity of the div is set to 0.5, but the child elements h1 and p also become semi-transparent. 
This makes it hard to read the text.
If we want the opacity to apply only to the background, we can specify the background color value using rgba instead of using RGB.

2) Opacity using RGBA: (mainly used for parent & setting background)
syntax: rgba(red, green, blue, alpha)
The alpha parameter sets the opacity. It takes in any value ranging from 0.0 to 1.0!

Example:
HTML:
<div class="card">
  <img src="https://ik.imagekit.io/d9mvewbju/Course/BigbinaryAcademy/new-york-city_5gBb-QRzNV.jpg" alt="Image 1">
</div>

CSS:
.card:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

3) Opacity using hsla:
HTML:
<div class="box"></div>

CSS:
.box{
  height: 150px;
  width: 200px;
  margin: 50px auto;
  background-color: hsla(0px, 100%, 50%, 0.5);
}