Text in Transparent Box Using CSS3

The opacity property is used to create a transparent textbox. Set an image in the transparent box using the background property. Since, we have set the opacity, it will make the text and image appearing in the text box to be transparent.

Create a div container

A div container is set −

<div class="transparentBox">
   <div class="transparentText">
      <p>This is some random text inside the transparent box</p>
   </div>
</div>

Transparent textbox

Within the above parent div, the textbox child div is set −

<div class="transparentText">
   <p>This is some random text inside the transparent box</p>
</div>

Set an image

For the transparent box, an image is set using the background property. The image source is set in the url() −

transparentBox {
   background: url("https://www.tutorialspoint.com/images/dbms_icon.svg") repeat;
   border: 2px solid black;
}

Transparent text

In the box, set the opacity property for the transparency −

.transparentText {
   margin: 30px;
   background-color: #ffffff;
   border: 1px solid black;
   opacity: 0.6;
}

Example

To set text in the transparent box with CSS3, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .transparentBox {
         background: url("https://www.tutorialspoint.com/images/dbms_icon.svg") repeat;
         border: 2px solid black;
      }
      .transparentText {
         margin: 30px;
         background-color: #ffffff;
         border: 1px solid black;
         opacity: 0.6;
      }
      .transparentText p {
         margin: 5%;
         font-weight: bolder;
         color: #000000;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1>Text in transparent box example</h1>
   <div class="transparentBox">
      <div class="transparentText">
         <p>This is some random text inside the transparent box</p>
      </div>
   </div>
</body>
</html>
Updated on: 2023-12-27T16:49:02+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements