CSS में RGB बनाम RGBa रंग (क्या, क्यों, कैसे)

CSS में RGB और RGBa रंगों के बीच अंतर के बारे में जानें और आप अपनी वेबसाइट के लिए सुंदर, ध्यान आकर्षित करने वाले UI घटक बनाने के लिए RGBa का उपयोग कैसे कर सकते हैं।

आरजीबी और आरजीबीए हेक्स कोड रंग मानों (जैसे #282828) का उपयोग करने के विकल्प के रूप में CSS में उपयोग किए जाने वाले दो रंग मॉडल हैं )

RGB और RGBa में क्या अंतर है?

• RGB का मतलब लाल, हरा और नीला है
• आरजीबीए का अर्थ है लाल, हरा, नीला और अल्फा

अल्फा एक पारदर्शिता है चैनल, जिसका उपयोग आप किसी रंग की पारदर्शिता की डिग्री को नियंत्रित करने के लिए कर सकते हैं।

यदि आप भ्रमित हैं, तो चिंता न करें, यह एक मिनट में समझ में आ जाएगा।

RGB और RGBa का उपयोग करने के लिए, CSS दो कलर फंक्शन प्रदान करता है rgb() और rgba() ।

लाल, हरे, नीले रंग के पैमाने पर 0 से 255 तक के पृष्ठभूमि रंग जोड़ने के लिए दोनों कार्यों का उपयोग किया जाता है।

हालांकि, rgb() केवल ठोस पृष्ठभूमि रंग जोड़ने के लिए उपयोग किया जाता है:

{   
    /* 100% solid green */
    background-color: rgb(0, 255, 0); 
}

इस बीच, आरजीबीए आरजीबी की तुलना में बहुत अधिक लचीला है क्योंकि यह आपको अल्फा चैनल के माध्यम से पारदर्शिता जोड़ने की भी अनुमति देता है:

{   
    /* 50% green transparency */
    background-color: rgb(0, 255, 0, 0.5); 
}

पृष्ठभूमि के रंगों में पारदर्शिता जोड़ना क्यों उपयोगी है?

उदाहरण के लिए, मान लें कि आप अपनी वेबसाइट के लिए एक ध्यान खींचने वाला UI कार्ड डिज़ाइन करना चाहते हैं, जैसे:

ऊपर दिया गया UI कार्ड है:

• एक थंबनेल छवि
• एक ओवरले
• शीर्ष पर कुछ पाठ।

मैंने rgba() . का इस्तेमाल किया पाठ के साथ पृष्ठभूमि छवि की तुलना कितनी दृश्यमान होनी चाहिए, इसे नियंत्रित करने के लिए अल्फा चैनल का उपयोग करने के लिए फ़ंक्शन। मैंने UI कार्ड ओवरले के लिए 50% काली पारदर्शिता को चुना:

.card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */
}

मैंने 50% पारदर्शिता का उपयोग क्यों किया?

यह 40% या 60% भी हो सकता था। मैं पारदर्शिता के दो अलग-अलग स्तरों के साथ एक रैखिक-ढाल का भी उपयोग कर सकता था। यह इस बात पर निर्भर करता है कि आप किस तरह का लुक चाहते हैं।

उच्च बनाम निम्न अल्फा चैनल पारदर्शिता:

• अल्फ़ा चैनल मान जितना कम होगा (जैसे 0.1 ), अधिक पारदर्शिता, और पृष्ठभूमि छवि जितनी अधिक दृश्यमान होती है।
• अल्फ़ा चैनल मान जितना अधिक होगा (जैसे 0.9 ), कम पारदर्शिता और पृष्ठभूमि छवि उतनी ही कम दिखाई देती है।

जैसा कि आप नीचे की तुलना में देख सकते हैं, अल्फा चैनल मान प्रस्तुति की पठनीयता और मनोदशा को प्रभावित करता है:

आप ओवरले को बहुत हल्का या बहुत गहरा नहीं बनाना चाहते हैं।

आप अपने उपयोगकर्ताओं के लिए अपनी सामग्री का प्रतिनिधित्व कैसे करना चाहते हैं, इसके साथ संरेखित करने वाले मीठे स्थान को खोजने के बारे में यह सब कुछ है।

उदाहरण कोड

UI कार्ड उदाहरण से सभी HTML और CSS नीचे दिए गए हैं।

एचटीएमएल

    <div class="card">
      <div class="card-overlay"></div>
      <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
      <div class="card-text">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>

CSS

.card {
    position: relative;
    height: 400px;
    width: 400px;
}

.card-thumbnail {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-text {
    color: white;
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-title {
    font-size: 1.45rem;
}
.card-description {
    font-size: 1.15rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

इसे संदर्भ के रूप में या अपने स्वयं के UI कार्ड के लिए एक प्रारंभिक बिंदु के रूप में उपयोग करें।