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.

How do I change the background image opacity in CSS without affecting text?

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 an 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>
About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment