Opacity क्या है
Opacity utilities एक element को कम या ज़्यादा see-through बनाती हैं।
In this page:
Syntax
<div class="opacity-50">content</div>Opacity
.opacity-100, .opacity-75, .opacity-50, और .opacity-25 पूरे element की transparency set करते हैं। सिर्फ colours के लिए, .text-opacity-* और .bg-opacity-* इस्तेमाल करें, जो content को पूरी तरह opaque छोड़ते हैं। Opacity children को भी affect करता है, इसलिए सही utility चुनें।
Note:
bg-opacity सिर्फ background बदलता है, ऊपर text नहीं।
उदाहरण: Opacity
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="bg-primary text-white p-2 mb-1 opacity-100">opacity-100</div>
<div class="bg-primary text-white p-2 mb-1 opacity-50">opacity-50 (text fades too)</div>
<div class="bg-primary bg-opacity-25 p-2 mb-1">bg-opacity-25 (text stays solid)</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- जब सिर्फ background fade होना चाहिए opacity इस्तेमाल करना
- text unreadable बनाना
- यह भूल जाना कि bg-opacity को एक bg colour class चाहिए
चैप्टर सारांश
- opacity-25, 50, 75, 100 classes मिलती हैं
- bg-opacity और text-opacity सिर्फ colours affect करते हैं
- Opacity children को affect करता है
- bg-opacity के लिए एक background class चाहिए
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: