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>

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
}



Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

Load Comments

Provide Feedback For This Article

We take your feedback seriously and use it to improve our content. Thank you for helping us serve you better!

Helpful Not Helpful

Thanks for your feedback! If you have time, please provide details by selecting options below.

Submit Feedback

😊 Thanks for your time, your feedback has been registered!