CSS Background Color

एक Background Color Set करना

background-color कोई भी CSS color value accept करती है -- named, hex, rgb(), या hsl() -- और element के padding box को उस solid color से भर देती है, जो content के पीछे लेकिन page background के आगे बैठता है। यह color से independent है, जो सिर्फ text को असर करता है।

उदाहरण: Setting a Background Color

<style>
.box {
  background-color: rgb(200, 220, 255);
}
</style>
<div class="box">Filled behind the content, in front of the page background</div>

Background Color और Box Model

यह fill default रूप से content area और padding पर लागू होती है, border पर रुक जाती है (जब तक background-clip इसे न बदले), इसलिए padding बढ़ाना colored area को visibly बड़ा कर देता है भले ही element की declared width/height न बदली हो।

उदाहरण: Background Color and the Box Model

<style>
.box {
  background-color: lightblue;
  padding: 30px;
}
</style>
<div class="box">More padding visibly grows the colored area</div>

Transparent और Inherited Backgrounds

Default value transparent है, यानी बिना explicit background-color वाला element अपने पीछे जो भी है वह दिखाता है -- आमतौर पर अपने parent का background।

Background-color: transparent explicitly set करना कभी-कभी उपयोगी होता है ताकि कहीं और set किए गए color को उस declaration को पूरी तरह हटाए बिना override किया जा सके।

उदाहरण: Transparent and Inherited Backgrounds

<style>
.parent {
  background-color: yellow;
}
.child {
  background-color: transparent;
}
</style>
<div class="parent">
  <div class="child">Shows the parent's yellow behind it</div>
</div>

Full-Page Background Color

html या body selector पर background-color set करना पूरे visible page को color कर देता है, क्योंकि वे elements default रूप से पूरे viewport में फैले होते हैं। पूरे page का overall background color set करने या dark-mode theme के लिए base layer implement करने का यह standard तरीका है।

उदाहरण: Full-Page Background Color

<style>
body {
  background-color: #111;
}
p {
  color: #eee;
}
</style>
<p>Colors the entire visible page</p>

Alpha के साथ Background Color

background-color के लिए rgba() या hsla() इस्तेमाल करना fill को semi-transparent बनाता है, जिससे element के पीछे जो कुछ भी है वह थोड़ा दिख सके -- overlays, hover states, या दूसरे content के ऊपर layered subtle tinted panels के लिए उपयोगी।

उदाहरण: Background Color with Alpha

<style>
.overlay {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}
</style>
<div class="overlay">Semi-transparent panel over whatever is behind it</div>