Change background opacity of text block without changing opacity of text.

Site URL: https://grouse-seal-j62k.squarespace.com/home-1

Hi there, 

I'm hoping someone can help, I've currently added a background color so that the text can be visible over the background video. However, I'd like to change the opacity of the background WITHOUT changing the opacity of the text. The CSS I'm using right now does both.

This is what I have currently used. 

#block-d325a806d44c4257f1d4 {
background: #000000;
opacity: 0.5;
padding: 5px;
text-align: center;
}

Any help would be appreciated or if you have an even nicer looking way to do this (like say, with the big rectangular black bar) that would work too. 

The password is "prince"

So, I answered my own question but will leave it up in case anyone else wants to know. Instead of using hex for the color of the background, I used HSLA format. 

#block-d325a806d44c4257f1d4 {
background: hsla(0,0,0,.15);
padding: 1px;
text-align: center;
}

For anyone that doesn't know, the last number (.15 in this case) represents the opacity of the background color.  This way it will only affect the background color and not the whole block, thus the text stays opaque while you can freely change the transparency of the background. 

This was very helpful. Thank you!

On 6/11/2021 at 1:12 PM, Johnathan said:

This was very helpful. Thank you!

 

Happy it helped someone else.