Set the opacity for the background color with CSS

To set the opacity for the background color, use the opacity property with RGBA color values.

Example

You can try to run the following code to implement the opacity property:

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background: rgb(40, 135, 70);
            padding: 20px;
         }
         div.first {
            background: rgba(40, 135, 70, 0.2);
         }
         div.second {
            background: rgba(40, 135, 70, 0.6);
         }
      </style>
   </head>
   <body>
      <p>RGBA color values</p>
      <div class = "first"><p>20% opacity</p></div>
      <div class = "second"><p>60% opacity</p></div>
      <div><p>Default Opacity</p></div>
   </body>
</html>
Updated on: 2020-07-01T10:50:40+05:30

269 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements