It is simply not refutable that HTML and CSS are mostly built as a user interface tool combination. That is why it is much more vital for you to master all the design manipulation techniques.

One of them is knowing how to set background opacity in CSS. With this guide, we will walk you through the three available methods. 

Set Background Opacity In CSS Using The opacity Property

opacity is one of the most used properties of CSS, especially if it’s the colors you are dealing with. It allows you to customize an element or a color’s opacity by changing its value between 0 and 1.

When the value is at 1, the color has 100% opacity. In other words, it is not at all transparent. The lower we decrease this value, the more transparent the element becomes. When it reaches 0.5, your element is in a semi-transparent state.

You need to keep in mind that opacity doesn’t just change the main element but also its children elements.

Let’s take a quick example:

<h1 class="transparentTest"> Checking </h1>
.transparent{ 
      background-color: #66ff33; 
      opacity: 0.5; 
}

The output is the word “Checking” in vivid green color with 50% transparency.

Set Background Opacity In CSS Using The rgba() Function

rgba() is a function mainly used for defining colors by utilizing the classic red-green-blue alpha setting. As you can easily guess, the rgb part signifies the value for red, green, and blue, respectively. The last part, a, tells the computer how much opacity is there.

Each rgb parameter fluctuates between 0 and 255, while a can only range between 0 and 1. Just like the previous method, the lesser a is the more transparent the detail.

This method is not absolute, so the children elements are not forced to follow their parent element.

The example above will become as follow:

<h1 class="transparentTest"> Checking </h1>
.transparent{ 
      background-color: rgba(102, 255, 51, 0.5); 
}

The output stays the same.

Set Background Opacity In CSS Using Hex Values

Every single HTML programmer must have once fiddle with an element’s color using hex values. After all, it’s the quickest and most robust way to manipulate colors, as you just need to put in a “#” and six specific numbers.

However, not many people are aware that by adding two numbers behind this hex value, you can adjust the color’s transparency. It does have a weakness of being hard to master due to it using the RGB colors’ scale of 0 to 255. 

For example, let’s say you want to make the color 50% transparent, you can’t put in 50. You must first take the corresponding value from the RGB value, which is 128 here, as it’s 50% of 255. Then, you have to convert this value into a hex value, which is 80.

Only now can you add it into the original hex value to signify the opacity.

Example:

<h1 class="transparentTest"> Checking </h1>
.transparent{ 
      background-color: #66ff3380; 
}

Again, you get the same output, despite changing the code. Remember that this technique, while appearing simple, is the backbone for many high-level tricks like creating hover text.

Conclusion

Now that you have finished our guide on how to set background opacity in CSS, this issue should never bother you anymore. All you need to do is grasp the three methods we have presented and know exactly when is the best time for which method.

After all, each of them has specific situations where it shines the most.