How to Give a Text or an Image a Transparent Background Using CSS?

There is really no property the same as transparency in CSS. However, you can produce the transparency effect by using the CSS3 opacity property.

The opacity property is used to specify the transparency of an image or a text. This property is used to adjust the transparency of a text or picture. The number ranges between 0 and 1. The value of 1 is the default value and makes the element fully opaque. A value of 0 makes the element fully transparent. A value between 0 and 1 gradually makes an element clear.

Creating a Transparent Image

In order to create a simple transparent image you just need to set the opacity for your <img> element.

Example of a transparent image with the opacity set:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      .trans { 
      /* IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      /* IE 5-7 */
      filter: alpha(opacity=50);
      /* Netscape */
      -moz-opacity: 0.5;
      /* Safari 1.x */
      -khtml-opacity: 0.5;
      /* Good browsers */
      opacity: 0.5;
      } 
    </style>
  </head>
  <body>
    <h2>Opacity: 0.5</h2>
    <img class="trans" src="/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg" alt="Image" width="200"> 
    <h2>Original image</h2>
    <img src="/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg" alt="Original Image" width="200"> 
  </body>
</html>

Here see an example where the image on the background is transparent due to the opacity: 0.5.

Example of a transparent background image:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      body {
      background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat;
      background-size: cover;
      }    
      .logo { 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      } 
      div { 
      padding-top: 30px;
      text-align: center; 
      } 
    </style>
  </head>
  <body>
    <div>
      <img class="logo" src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="Background Image"> 
    </div>
  </body>
</html>

Now let’s see another example where a transparent box, with a text inside, is created on a background image. Create a box using the <div> tag and add the margin property to put the box in the middle of your background. Then, set the opacity for your box.

Example of a background image with a transparent box of text:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      body {
      background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat;
      background-size: cover;
      }    
      .logo { 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      } 
      div { 
      padding-top: 30px;
      text-align: center; 
      } 
    </style>
  </head>
  <body>
    <div>
      <img class="logo" src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="Background Image"> 
    </div>
  </body>
</html>

See another example where the :after selector is used with a single paragraph to set the opacity of it. In this example also a picture is included in the paragraph.

Example of setting opacity with the :after selector:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .background {
      background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat center top;
      border: 1px solid #666;
      }
      .box {
      margin: 100px;
      background-color: #eee;
      border: 1px solid #666;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      filter: alpha(opacity=60);
      -moz-opacity: 0.6;
      -khtml-opacity: 0.6;
      opacity: 0.6;
      }
      .box p {
      padding: 15px;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="background">
      <div class="box">
        <p>I am a text placed in a transparent box.</p>
      </div>
    </div>
  </body>
</html>
Now, let's consider another case when the opacity effect disappears while hovering. Here, the opacity property is used with the :hover selector to change the opacity on mouse-over.
<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      img {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      }
      img:hover {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      -khtml-opacity: 1;
      opacity: 1;
      }
    </style>
  </head>
  <body>
    <h2>Hover over the image to see the effect</h2>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="House" width="300">
  </body>
</html>

For maximum browser compatibility the -moz-, -khtml- prefixes are used. And filter: alpha(opacity=50); and -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" are used for IE.


Do you find this helpful?

Related articles