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 is a seasoned developer with over 10 years of experience in web and app development, and a deep knowledge of operating systems. Author of insightful How-To articles for Code2care.

Follow him on: X

We keep our articles short so the focus remains on providing effective tech solutions while promoting healthier screen habits and enhancing overall well-being. 📝 💡 🌱 By reducing screen time, we contribute to a greener future, reducing carbon emissions and fostering digital well-being. 🌍 🌿 🔋

We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity - #BlackLivesMatters

More Posts related to CSS,

More Posts: