How to Set Background Opacity in CSS
Table of Contents
CSS is an integral part of the web because it lets you control the styles of the page.
One of the most interesting things you can do with CSS is create a transparent or semi-transparent colored background.
In this post, we'll learn the easiest ways to set a background color with opacity in CSS.
How to set a background color with the opacity property
One of the most straightforward ways to set a background color with opacity is to use the opacity property.
This property is used to set the opacity level for an element.
The opacity level is a number between 0 and 1, where 0 means fully transparent and 1 means fully opaque.
Let's create a div with a background color and set the opacity to 0.5:
HTML<div class="semi-transparent">
Hello world
</div>
CSS.semi-transparent {
background-color: #ff0000;
opacity: 0.5;
}
The result will be a div with a red background color and 50% opacity:
- HTML
- CSS
Keep in mind that because the opacity property cascades down the entire element, the text inside the div will also be semi-transparent.
If you would like just the background to be semi-transparent, follow along to the next section.
How to set a background color with the rgba() function
The rgba()
function is used to set the color and opacity of an element.
The last parameter of the function is the opacity level, which is a number between 0 and 1, where 0 means fully transparent and 1 means fully opaque.
Let's again create a div with a background color and set the opacity to 0.5:
HTML<div class="semi-transparent">
Hello world
</div>
CSS.semi-transparent {
background-color: rgba(255, 0, 0, 0.5);
}
As you can see, the result is the same as the previous example, except that the text inside the div is not semi-transparent.
- HTML
- CSS
How to set a background color using hex
You can also set a background color with opacity using hex.
The hex color code is a six-digit code that represents the amount of red, green, and blue in a color, however, it can also include an alpha channel, which is the opacity level.
Let's once again create a div with a background color and set the opacity to 0.5.
Keep in mind that we need to convert the opacity level to hex, which is a number between 00
and ff
, where 00
means fully transparent and ff
means fully opaque, so to get 50% opacity, we need to convert 0.5 to hex, which is 80
.
HTML<div class="semi-transparent">
Hello world
</div>
CSS.semi-transparent {
background-color: #ff000080;
}
As you can see, the result is the same as the previous examples, except that the text inside the div is not semi-transparent:
- HTML
- CSS
Conclusion
In this post, we learned how to set a background color with opacity in CSS.
The options include using the opacity property, the rgba() function, and defining the color with alpha in hex.
Thanks for reading!
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a PHP app using Docker
- How to deploy a Deno app using Docker
- Getting Started with Deno
- Getting Started with Sass
- Learn how to use v-model with a custom Vue component
- How to Scrape the Web using Node.js and Puppeteer
- Setting Up Stylus CSS Preprocessor