What is an overlay effect?


What is an overlay effect?


An overlay is a semi-transparent element that we can place over elements (often images) for artistic flair and/or to enhance readability. For a visual example, take a look at these overlay demos.


Can you elaborate on this with an example?

Consider an element that is absolutely positioned to be directly above another element.

If that element is a DIV with a white background and 50% alpha-transparency, we can see through it.

I call this onion skin but it may go by other names. The alpha channel is the key. That is where the masking takes place.


Thank you Roy:smile::smile::smile::smile::smile:


can’t we change the opacity of the text/background alone?

Opacity of text can be changed using opacity for specific selector (maybe). I have tried changing opacity of the texts in p selector using -

p {
font-weight: bold;
font-size: 18px;
font-family: Helvetica;
color: AliceBlue;
line-height: 1.3em;
text-align: left;
width: 100%;
opacity: 0.5;

It resulted in fading the color of the text. so yes it worked.

But when i changed the background opacity in body, all the other elements including text, image also had changed it’s opacity.
I found this article helpful, in changing background opacity without having impacts on text.

1 Like

Opacity is an alpha layer that we can invoke. We need to be clear on the inheritance aspect when getting selective.

How can I change the opacity of the background while keeping the text fully opaque?

When setting the background, use an rgb color value that includes the alpha layer.


background-color: rgba(128, 192, 255, 0.4);


Ignore the general intent of that page but play with the alpha value in the selector rule. Enter a name so the text appears.