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>
</p>
