CSS Opacity

एक glass window pane पकड़ने की कल्पना करें। अगर glass साफ़ है, तो आप उसके through बाहर के garden को सीधे देख सकते हैं (पूरी तरह transparent)। अगर आप glass पर frosting की एक layer spray करते हैं, तो view धुँधली और hazy हो जाती है (semi-transparent)। अगर आप glass को solid black paint करते हैं, तो यह view को पूरी तरह block कर देता है (पूरी तरह opaque)। CSS opacity वह frosting spray है। यह आपके elements के transparency level को control करता है, आपको यह चुनने देता है कि background content का कितना हिस्सा through दिखे।

In this page:

Opacity Scale
Interactive Hover Transitions
Opacity बनाम RGBA Transparency
Opacity बनाम visibility: hidden
Layered Backdrops में Opacity

Syntax

css

selector {
  opacity: number-between-0-and-1;
}

Opacity Scale

opacity property किसी element का transparency level set करती है। यह 0.0 (पूरी तरह transparent और invisible) से 1.0 (पूरी तरह opaque और solid) के scale पर decimal values accept करती है। किसी element की opacity बदलना उस element और उसके सभी nested children को असर करता है।

Note:

अपने links या buttons पर smooth hover transitions और animations बनाने के लिए opacity changes इस्तेमाल करें।
Accepted values:
number — 0 (पूरी तरह transparent) से 1 (पूरी तरह opaque)
percentage — 0% से 100% भी accepted है
0.5 — आधा transparent
Element और उसके सभी children पर लागू होता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: किसी element की opacity कम करना उसके सभी nested children को भी transparent बना देता है, जो text को unreadable बना सकता है।

उदाहरण: The Opacity Scale

css

<style>
.faint {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 0.3;
}
.solid {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 1;
}
</style>
<div class="faint">30% opacity</div>
<div class="solid">Fully opaque</div>

Interactive Hover Transitions

आप अपने buttons, links, या cards पर elegant, responsive hover transitions बनाने के लिए opacity इस्तेमाल कर सकते हैं। किसी element को उसकी normal state में थोड़ा dim करके और hover पर पूरी opacity restore करके, आप users को बताते हैं कि element interactive है।

Note: smooth, polished hover animations बनाने के लिए opacity changes को CSS transition property के साथ combine करें।

Warning: सुनिश्चित करें कि आपके dimmed elements में फिर भी आसानी से readable रहने के लिए काफ़ी color contrast हो।

उदाहरण: Interactive Hover Transitions

css

<style>
.btn {
  opacity: 0.7;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 1;
}
</style>
<button class="btn">Hover me</button>

Opacity बनाम RGBA Transparency

अगर आप एक semi-transparent container background (जैसे एक overlay) बनाना चाहते हैं लेकिन चाहते हैं कि इसके nested child elements (जैसे titles या text) solid और opaque रहें, तो opacity property इस्तेमाल न करें। इसके बजाय, अपनी background-color property के लिए एक RGBA color value इस्तेमाल करें।

Note: nested text की readability को असर किए बिना semi-transparent overlay boxes बनाने के लिए RGBA background-color rules इस्तेमाल करें।

Warning: opacity property element और उसके सभी nested children को असर करती है, जो इसे text containers को style करने के लिए खराब बनाती है।

उदाहरण: Opacity vs. RGBA Transparency

css

<style>
.opacity-box {
  background: seagreen;
  color: white;
  padding: 10px;
  opacity: 0.5;
}
.rgba-box {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}
</style>
<div class="opacity-box">Text is also faded</div>
<div class="rgba-box">Text stays fully readable</div>

Opacity बनाम visibility: hidden

अगर आप अपने page पर किसी element को पूरी तरह hide करना चाहते हैं, तो आप उसकी opacity को 0 set कर सकते हैं या visibility: hidden property इस्तेमाल कर सकते हैं। दोनों element को invisible बनाते हैं, लेकिन display: none set करने के उलट, element फिर भी document flow में अपनी original layout space occupy करता है।

Note:

किसी ऐसे element को hide करने के लिए opacity: 0 इस्तेमाल करें जिसे आप बाद में JavaScript से smoothly view में fade करना चाहते हैं।
Accepted values:
opacity — 0 से 1; element को fade करता है, फिर भी clickable
visibility: hidden — invisible, जगह लेता है, clickable नहीं
display: none — layout से पूरी तरह हटाया गया

Warning: opacity: 0 वाले invisible elements फिर भी screen पर users द्वारा clickable रहते हैं जब तक आप pointer-events: none भी set न करें।

उदाहरण: Opacity vs. visibility: hidden

css

<style>
.opacity-hidden {
  opacity: 0;
}
</style>
<p>Before</p>
<p class="opacity-hidden">Invisible, but still takes up space and is clickable</p>
<p>After</p>

Layered Backdrops में Opacity

आप सुंदर layered backdrops और complex image textures बनाने के लिए opacity rules इस्तेमाल कर सकते हैं, background assets को foreground layers के साथ साफ़ तरीके से blend करते हुए।

Note: अपने primary card typography को उभारने के लिए secondary backdrop containers को थोड़ा fade करें।

Warning: primary cards पर ज़्यादा transparency accessibility contrast guidelines violate कर सकती है।

उदाहरण: Opacity in Layered Backdrops

css

<style>
.backdrop {
  opacity: 0.6;
}
.card {
  position: relative;
}
</style>
<div class="card">
  <img class="backdrop" src="https://placehold.co/300x150" alt="Faded backdrop">
  <p>Foreground text pops</p>
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Pseudo-elements Next Lesson → CSS Navigation Bar