Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Text in Transparent Box using CSS3
The CSS opacity property is used to create transparent text boxes with background images. This technique allows you to overlay text content on images while maintaining readability through controlled transparency effects.
Syntax
.element {
opacity: value;
background: url("image-path") repeat;
}
Possible Values
| Value | Description |
|---|---|
0 |
Completely transparent (invisible) |
0.1 - 0.9 |
Semi-transparent (decimal values) |
1 |
Completely opaque (default) |
Example: Text in Transparent Box
The following example creates a transparent text box with a background image −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.transparentBox {
background: url("/images/dbms_icon.svg") repeat;
border: 2px solid #333;
width: 400px;
height: 200px;
position: relative;
}
.transparentText {
margin: 30px;
background-color: #ffffff;
border: 1px solid #000;
opacity: 0.7;
padding: 20px;
border-radius: 5px;
}
.transparentText p {
margin: 0;
font-weight: bold;
color: #000;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<h2>Transparent Text Box Example</h2>
<div class="transparentBox">
<div class="transparentText">
<p>This text appears in a transparent box over the background image</p>
</div>
</div>
</body>
</html>
A box with a repeating background image appears, containing semi-transparent white text overlay with the message "This text appears in a transparent box over the background image". The text is readable while the background image is partially visible through the transparent overlay.
Key Points
- The
opacityproperty affects both the background color and text content - Use
background: url()to set background images for the container - Combine
opacitywith solid background colors for better text readability - Values between 0.6-0.8 typically provide good balance between transparency and readability
Conclusion
CSS transparent boxes using the opacity property create visually appealing text overlays on background images. This technique is commonly used in modern web design for hero sections, image captions, and content overlays.
Updated on: 2026-03-15T14:46:31+05:30
2K+ Views
Advertisements