How to make a box semi | css background color opacity
Inmanycasesyouwillonlywanttomakethebackgroundcoloritselfpartlytransparent,keepingthetextandotherelementsfullyopaque.Toachievethis,usea
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>[1] 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.
References (developer.mozilla.org)