How to get a semi-transparent background with the context of that element opaque using CSS?

There are lots of situations when we need the background of an HTML element semi-transparent. But the context of that element should be opaque. For example, we can use this concept at CSS logo design like the below image.

But the question is how to get the actual effect? We can achieve this effect by using a semi-transparent png image or by using CSS background-color property.

We are going to achieve this effect by using CSS background-color property. In defining color in CSS, we are using hex or RGB color code method. But we are going to use RGBA color format. Here we know the meaning of RGB, i.e red, green and blue. But the “A” means Alpha. Generally, RGBA is extension of RGB.

The “A” parameter is a number between 0.0 to 1.0 where 0.0 means fully transparent and 1.0 fully opaque. The Red, Green and Blue value should be 0 to 255. The syntax of the RGBA color format is

rgba(red, green, blue, opacity);

So below is the code by which we can get that effect.

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
Spread the love
0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x