How to Make a Semi-Transparent Background with CSS

One design feature that can cause some difficulties is making a semi-transparent background when we want an opaque text on it. In this snippet, you can find a solution to this problem.

So, if you want the background of a <div> to be semi-transparent, and the text to be opaque, you’ll simply need an RGBA value for the background, which adds an alpha-transparency to the color.

We’ll start with creating HTML.

Create HTML

Use a <div> with a class name "container".

<div class="container">W3Docs</div>

Add CSS

  • Add the background property with the RGBA value to the container.
.container {
  background: rgba(170, 187, 97, 0.5);
}

The final code looks like the following.

Example of making a semi-transparent background:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: rgba(170, 187, 97, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">W3Docs</div>
  </body>
</html>

Result

W3Docs

In the example above, we set the RGBA transparency value to 0.5 for the background of the <div>. The value can be in the range from 0 (fully transparent) to 1 (fully opaque).

For more browser compatibility, it is a good practice to use a fallback background color. We’ll use the RGB value without the alpha transparency.

Example of making a semi-transparent background with a fallback:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        background: rgb(170, 187, 97);/* Fallback */
        background: rgba(170, 187, 97, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="container">W3Docs</div>
  </body>
</html>

Let’s see another example.

Example of making a semi-transparent background using the background-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: rgba(255, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <p>
      <span>W3Docs!</span>
    </p>
  </body>
</html>

In this example, we used the background-color property, and here also we set a RGBA value.

It’s important to note that the RGBA value is different from the opacity property. Unlike a RGBA value, the opacity property will affect not only the background of an element; all the child elements will have the same transparency as the background. Thus, it can cause difficulty when reading the text.

Now, let’s see one more example where we use the opacity property just to demonstrate its difference from the previous examples.

Example of making a transparent background using the opacity property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #ff7c73;
        padding: 10px;
      }
      div.first {
        opacity: 0.1;
      }
      div.second {
        opacity: 0.3;
      }
      div.third {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div class="first">
      <p>opacity 0.1</p>
    </div>
    <div class="second">
      <p>opacity 0.3</p>
    </div>
    <div class="third">
      <p>opacity 0.6</p>
    </div>
    <div>
      <p>opacity 1 (default)</p>
    </div>
  </body>
</html>