How to make a box semi-transparent
This guide will help you to understand the ways to make a box semi-transparent using CSS.
Change the opacity of the box and content
If you would like the box and all of the contents of the box to change opacity, then the CSS opacity property is the tool to reach for. Opacity is the opposite of transparency; therefore opacity: 1 is fully opaque—you will not see through the box at all.
Using a value of 0 would make the box completely transparent, and values between the two will change the opacity, with higher values giving less transparency.
Changing the opacity of the background color only
In many cases you will only want to make the background color itself partly transparent, keeping the text and other elements fully opaque. To achieve this, use a <color> value that has an alpha channel, such as rgb(). As with opacity, a value of 1 for the alpha channel value makes the color fully opaque. Therefore, background-color: rgb(0 0 0 / 50%); will set the background color to 50% opacity.
Try changing the opacity and alpha channel values in the below examples to see more or less of the background image behind the box.
Note: Take care that your text retains enough contrast with the background in cases where you are overlaying an image; otherwise you may make the content hard to read.