पारदर्शी बॉक्स में टेक्स्ट रखने के लिए पैरेंट पर बैकग्राउंड इमेज, चाइल्ड पर सेमी-ट्रांसपेरेंट बैकग्राउंड (opacity: 0.6) उपयोग करें। टेक्स्ट पठनीय रहता है क्योंकि केवल बैकग्राउंड पारदर्शी है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.transparentBox {
background: url("https://i.picsum.photos/id/249/1000/300.jpg") 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>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- बैकग्राउंड इमेज - पैरेंट पर रिपीटिंग पैटर्न
- opacity: 0.6 - सफेद बैकग्राउंड 60% अपारदर्शी
- टेक्स्ट अपारदर्शी - opacity पैरेंट पर, टेक्स्ट पर नहीं
- rgba() विकल्प - background: rgba(255,255,255,0.6) से केवल बैकग्राउंड पारदर्शी
- पैडिंग/मार्जिन - टेक्स्ट को किनारों से दूर रखता है
