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

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>
bhaskargeeksforgeeks
HTML-Questions
Picked
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?