Languages
[Edit]
EN

CSS - set element transparent background

0 points
Created by:
Aleena
334

In this article, we would like to show you how to set an element transparent background using CSS.

Quick solution:

div {
  background: rgba(0, 0, 255, 0.5);  /* blue color with opacity: 50%; */
}

alternative solution:

div {
  background: blue;
  opacity: 0.5;  /* whole element opacity: 50%; */
}

Note:

Alternative solution will set whole element opacity to 50% while the first one will set only the background opacity.

 

Practical example

In this example, we create a transparent div using RGBA color with alpha parameter (the fourth parameter) set to 0.5 which means our element will be 50% transparent.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    body {
      height: 150px;
    }
    
    div {
      height: 100px;
      width: 100px;
      background: red;
    }

    .transparent-div {
      position: absolute;
      top: 20px;
      left: 20px;

      background: rgba(0, 0, 255, 0.5);  /* blue color with opacity: 50%; */
    }

  </style>
</head>
<body>
  <div></div>
  <div class="transparent-div"></div>
</body>
</html>

Note:

The alpha parameter (fourth parameter in RGBA) is a number between 0-1, where 0 means fully transparent and 1 - not transparent color.

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join