CSS Background Opacity with Examples

There are many ways in which we can set the background of an element in HTML Opaque using CSS. Let's take a look at a few examples.

Example 1: Opacity Property

<div class="div-opaque-05">Opacity 0.5</div>
<div class="div-opaque-08">Opacity 0.8</div>

<style>
.div-opaque-05 {
  background-color: #000;
  opacity: 0.5; 
  color: #fff;
  padding:10px
}

.div-opaque-08 {
  background-color: #000;
  opacity: 0.8; 
  color: #fff;
  padding:10px
}
<style>

Opacity 0.5

Opacity 0.8

Example 2: Using Hex Color Code Alpha Channel

.div-opaque-05 {
  background-color: #00000080;
  color: #fff;
  padding:10px
}

.div-opaque-08 {
  background-color: #00000050;
  color: #fff;
  padding:10px
}

Example 3: Using RGBA Background Color

.div-opaque-05 {
  background-color: rgba(0, 0, 255, 0.3);
  color: #fff;
  padding:10px
}

.div-opaque-08 {
  background-color: rgba(0, 0, 255, 0.8);
  color: #fff;
  padding:10px
}

Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

More Posts related to CSS,

More Posts: