Try It Yourself: CSS Opacity and Transparency

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Opacity and Transparency</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Opacity</h1>

<div class="opacity">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="child">
    <img src="web-design.jpg" width="100%">
  </div>
</div>

<style>
.opacity{
  width: 100%;
  display: table;
  background: #000;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  opacity: 0.2;
}
.child{
  width: 48%;
  float: left;
}
.child:last-child{
  float: right;
} 
</style>

<h2>Transparency using RGBA</h2>

<div class="transparency">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="child">
    <img src="web-design.jpg" width="100%">
  </div>
</div>

<style>
.transparency{
  width: 100%;
  display: table;
  background: rgba(0,0,0,0.2);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
}
.child{
  width: 48%;
  float: left;
}
.child:last-child{
  float: right;
} 
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Opacity and Transparency - Playground