Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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: 27-Dec-2023
859 Views
Advertisements