Semi-Transparent Content Containers

[kaysweet92]

I'm trying to make the content containers semi-transparent but am having a hard time getting the CSS coding to cooperate. I am able to either get it transparent or solid color. I can't seem to add any kind of gradient to the transparency. Can someone help?

[Todge]

Apr 5, 2020 7:24:16 GMT -8 kaysweet92 said:

I'm trying to make the content containers semi-transparent but am having a hard time getting the CSS coding to cooperate. I am able to either get it transparent or solid color. I can't seem to add any kind of gradient to the transparency. Can someone help?

Maybe this will help...

Another way would be to create a transparent .png image and set it as the background.

[Retread]

Apr 5, 2020 7:24:16 GMT -8 kaysweet92 said:

I'm trying to make the content containers semi-transparent but am having a hard time getting the CSS coding to cooperate. I am able to either get it transparent or solid color. I can't seem to add any kind of gradient to the transparency. Can someone help?

Background-color with an alpha channel is different from a gradient.

The following has several instances of the same basic background-color with increasing alpha:

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

This is an example of a gradient:

background-image: linear-gradient(to right, red , yellow)

What is is you're after? Alpha or Gradient?

[kaysweet92]

Apr 5, 2020 10:06:10 GMT -8 Retread said:

Background-color with an alpha channel is different from a gradient.

What is is you're after? Alpha or Gradient?

THANK YOU for the explanation. Alpha. The first example that you provided

[Todge]

You can indeed have both a gradient AND have it transparent..

background: linear-gradient(90deg, rgba(255,0,0,0.5) 0%, rgba(255,127,0,0.5) 50%, rgba(255,255,0,0.5) 100%);

[Retread]

kaysweet92 , you can use an rgba color anywhere on a Style Sheet, but the difficulty comes from trying to use it in the Visual Editor. The color picker is designed around hex colors with no mechanism to enter an alpha channel.

You can still use the rgba color, but it's a bit tricky to know were to put it in the style sheet.

For instance, in the Visual Editor, you might select an opaque hex color for
Body (Content)

Containers

Primary Backgrounds

by using the color selector. And you would save changes to apply that opaque color.

Let's say that hex color was #c34646

You could then enter that color into a converter utility such as this one:
www.w3schools.com/colors/colors_converter.asp

We could use that to see the rgb equivalent of #c34646 is:
rgb(195, 70, 70)

We can change that to rgba by adding the alpha level.
If we want an 'opacity' of 40%, that would be 0.4
So our rgba would be either
rgba(195, 70, 70, 0.4)
OR
rgba (195, 70, 70, 40%)
either of those will work.

Now that we know the rgba color we need, we can switch to the Style Sheet tab.
When we search for the original hex color, #c34646, we find this line:
@container_background_color_1: #c34646;

Then we change that line to use the rgba color:
@container_background_color_1: rgba(195, 70, 70, 0.4);

Then Save Changes.




It's a bit convoluted, but for now, a workaround like that is all we have.

[kaysweet92]

Thank you both for all your assistance