Languages
[Edit]
EN

CSS - set background opacity only (not whole element)

0 points
Created by:
Saim-Mccullough
388

In this article, we would like to show you how to set background opacity only and remain the whole element not transparent using CSS.

Quick solution:

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

 

Practical example

In this example, we create a transparent background using RGBA alpha parameter (the fourth parameter) set to 0.5, which means we set the background opacity to 50%.

// ONLINE-RUNNER:browser;

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

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

    .transparent-background {
      border: 3px solid;
      position: absolute;
      top: 50px;
      left: 50px;

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

  </style>
</head>
<body>
  <div></div>
  <div class="transparent-background">Example text...</div>
</body>
</html>
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