CSS Transparent Images

Please Share On:

Definition:

CSS transparent images mean you can display your image with different opacity. The opacity value starts from 0.0 to 1. 0.0 is fully transparent and 1 is the less transparent.

See the below image of two transparent images with different opacity values:

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 20px;
      }

      .image2 {
        opacity: 1.0;
        padding: 20px;
      }
    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Image Transparent is 50%</th>
        <th>Image Transparent is 100%</th>
      </tr>
      <tr> 
      <td>
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image1" width="170" height="100">
      </td>
        <td>
           <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image2" width="170" height="100">
        </td>
      </tr>
      
    </table>
  </body>
</html>

Output:

Try it yourself

To understand in detail, click the “CSS Opacity” tutorial

Donate to support writers.

You may be interested in the following topics:

Post Views: 488

CSS Transparent Images

Definition:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.