How to give text or an image transparent background using CSS ?

Last Updated : 05 Nov, 2021

In this article, we will know to make the text or image a transparent background using the CSS & will see its implementation through the example. The opacity property is used to set image or text transparent using CSS. The opacity attribute is used to adjust the transparency of text or pictures. The value of opacity lies between 0.0 to 1.0 where the low value represents high transparency and the high value represents low transparency. The percentage of opacity is calculated as Opacity% = Opacity * 100. The opacity is the degree to which the content will be hidden behind an element.

Syntax:

element {
    opacity: value;
    // CSS property
}

Example 1: This example describes the image as transparent by setting the values of the opacity to 0.3.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Opacity property</title> 
    <style> 
    .forest { 
        opacity: 0.3; 
    } 
      
    .opacity { 
        padding-top: 300px; 
        text-align: center; 
    } 
      
    body { 
        background: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20211103124244/wind-300x193.jpg")  
                no-repeat; 
        background-size: cover; 
        background-size: 290px 220px; 
    } 
      
    .forest { 
        width: 220px; 
        height: 90px; 
        position: absolute; 
        top: 20%; 
        left: 20%; 
        transform: translate(-50%, -50%); 
    } 
    </style> 
</head> 
  
<body> 
    <div class="opacity">  
        <img class="forest" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211103124602/geeks-300x83.png"> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example describes the text as transparent using different rgba color values.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Transparent box</title> 
    <style> 
    .geeks { 
        background: rgb(0, 153, 0); 
        padding: 15px; 
        text-align: center; 
        width: 300px; 
    } 
      
    #geek { 
        padding: 15px; 
        text-align: center; 
        width: 300px; 
    } 
      
    .rgba1 { 
        background: rgba(0, 153, 0, 0.1); 
    } 
      
    .rgba2 { 
        background: rgba(0, 153, 0, 0.5); 
    } 
      
    .rgba3 { 
        background: rgba(0, 153, 0, 0.8); 
    } 
      
    .rgba4 { 
        background: rgba(0, 153, 0, 1.0); 
    } 
      
    .g1 { 
        float: left; 
        margin-left: 50px; 
    } 
      
    .g2 { 
        margin-top: -40px; 
        margin-left: 50px; 
        float: left; 
    } 
    </style> 
</head> 
  
<body> 
    <div class="g1"> 
        <p style="font-size:24px;font-weight:bold;">Transparent Box</p> 
  
        <div class="geeks" style="opacity:0.1;"> 
            <p>10% opacity</p> 
  
        </div> 
        <div class="geeks" style="opacity:0.5;"> 
            <p>50% opacity</p> 
  
        </div> 
        <div class="geeks" style="opacity:0.8;"> 
            <p>80% opacity</p> 
  
        </div> 
        <div class="geeks"> 
            <p>100% opacity</p> 
  
        </div> 
    </div> 
    <br> 
    <br> 
    <div class="g2"> 
        <p style="font-size:24px;font-weight:bold;">RGBA color values</p> 
  
        <div class="rgba1" id="geek"> 
            <p>10% opacity</p> 
  
        </div> 
        <div class="rgba2" id="geek"> 
            <p>50% opacity</p> 
  
        </div> 
        <div class="rgba3" id="geek"> 
            <p>80% opacity</p> 
  
        </div> 
        <div class="rgba4" id="geek"> 
            <p>100% opacity</p> 
  
        </div> 
    </div> 
</body> 
  
</html>