पाठ को प्रभावित किए बिना सीएसएस में पृष्ठभूमि-छवि अस्पष्टता को कैसे बदलें | एचटीएमएल/सीएसएस

वेबसाइट बनाते समय, आप अक्सर HTML <div> . पर बैकग्राउंड इमेज लगाना चाह सकते हैं जिसमें टेक्स्ट या अन्य सामग्री भी हो।

और टेक्स्ट को अलग दिखाने के लिए, आप CSS में उस बैकग्राउंड इमेज की अपारदर्शिता को बदलना चाहते हैं ताकि वह अर्ध-पारदर्शी हो। लेकिन आपने कोशिश की है, और आप टेक्स्ट या अन्य चाइल्ड तत्वों को प्रभावित किए बिना पृष्ठभूमि छवि की अस्पष्टता को नहीं बदल सकते हैं!

तुम क्या कर सकते हो? चिंता न करें- यह लेख आपको आपकी पृष्ठभूमि छवि अस्पष्टता को नियंत्रित करने के लिए कुछ व्यावहारिक समाधान देगा।

तो, सबसे पहले, बुरी खबर…

ऐसी कोई CSS संपत्ति नहीं है जिसका उपयोग आप केवल पृष्ठभूमि छवि की अस्पष्टता को बदलने के लिए कर सकते हैं।

पृष्ठभूमि के रंगों के विपरीत, जो आपको अस्पष्टता को नियंत्रित करने के लिए अल्फा चैनल को समायोजित करने की अनुमति देता है, यह केवल background-image के लिए मौजूद नहीं है। संपत्ति। शायद किसी दिन?

इस बीच, आइए देखें कि अस्पष्टता को बदलने से उस तत्व में टेक्स्ट या अन्य सामग्री क्यों प्रभावित होगी। फिर हम आपके द्वारा उपयोग किए जा सकने वाले वर्कअराउंड पर जाएंगे।

पैरेंट पर अस्पष्टता परिवर्तन चाइल्ड तत्वों को विरासत में मिलेगा।

उदाहरण के लिए, मान लें कि आपके पास कुछ पाठ के साथ एक div तत्व है, और आपने background-image सेट किया है माता-पिता पर .hero तत्व।

<div class="hero">
    <h1>Cute kittehs everywhere!</h1>
</div>

फिर आप पृष्ठभूमि छवि को अर्ध-पारदर्शी बनाने का प्रयास करने के लिए माता-पिता की अस्पष्टता को इस तरह समायोजित करते हैं:

.hero {
    background-image: url('https://placekitten.com/1200/800');
    opacity: 0.75;
}

अस्पष्टता स्वचालित रूप से बाल तत्वों द्वारा विरासत में मिली है, इसलिए जब आप मूल तत्व की अस्पष्टता को समायोजित करते हैं, तो यह उस मूल परत के सभी बाल तत्वों को प्रभावित करेगा। (यह इसी तरह है कि कैसे z-index को भी इनहेरिट किया जाता है।)

तो आप सभी तत्वों के साथ समाप्त हो जाएंगे, दोनों पृष्ठभूमि छवि और पाठ, कम अस्पष्टता वाले।

समाधान:पृष्ठभूमि छवि को पैरेंट के छद्म-तत्व में रखें।

इस समस्या को ठीक करने के लिए, हमें बैकग्राउंड इमेज को पैरेंट के चाइल्ड एलिमेंट में डालना होगा। यह सुनिश्चित करेगा कि पृष्ठभूमि की छवि और पाठ सामग्री माता-पिता में अपनी "परत" पर होगी। फिर आप एक दूसरे को प्रभावित किए बिना प्रत्येक परत की अस्पष्टता को नियंत्रित कर सकते हैं!

एक तरीका जिसका आप उपयोग कर सकते हैं, वह है background-image मूल तत्व के छद्म तत्व में शैलियाँ।

.hero {
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

h1 {
  position: relative;
  color: #ffffff;  
  font-size: 14rem;
  line-height: 0.9;
  text-align: center;
}

चूंकि छद्म तत्व माता-पिता का एक प्रकार का बच्चा है, आप पाठ सामग्री को प्रभावित किए बिना इसकी अस्पष्टता को बदल सकते हैं।

उस छद्म तत्व को माता-पिता के समान आकार बनाने के लिए, आपको इसे पूरी तरह से स्थिति में लाना होगा और इसके शीर्ष, दाएं, नीचे और बाएं मानों को शून्य पर सेट करना होगा ताकि यह ढह न जाए। साथ ही, एक छद्म तत्व के रूप में, इसमें content होना आवश्यक है संपत्ति सेट, अन्यथा यह पृष्ठ पर दिखाई नहीं देगा।

(आप बैकग्राउंड इमेज को इसके चाइल्ड एलीमेंट में भी डाल सकते हैं, लेकिन छद्म तत्व का उपयोग करने से HTML को सरल बनाए रखने में मदद मिलती है।)

फिर उस टेक्स्ट के लिए, जो हमारे पास <h1> . में है टैग, आपको इसे position: relative . पर सेट करना होगा ताकि यह छद्म तत्व और पृष्ठभूमि छवि के शीर्ष पर हो। यदि आप स्पष्ट रूप से position सेट नहीं करते हैं संपत्ति, यह z-index परत स्टैक में बिल्कुल स्थित छद्म-तत्व के नीचे छिपा होगा।

अंत में, माता-पिता को position: relative पर सेट करना न भूलें बच्चे को मर्यादा में रखने के लिए!

अब, टेक्स्ट अभी भी 1 की डिफ़ॉल्ट अस्पष्टता पर रहेगा, और कम अस्पष्टता सेटिंग छद्म-तत्व में पृष्ठभूमि छवि तक ही सीमित होगी।

मेरे पास उपरोक्त उदाहरण के लिए कोडपेन में कोड है- इसके साथ खेलने के लिए स्वतंत्र महसूस करें!

वैकल्पिक समाधान:कम अस्पष्टता के साथ एक ओवरले जोड़ें और पृष्ठभूमि-रंग पृष्ठभूमि छवि के शीर्ष पर।

एक अन्य समाधान यह है कि पृष्ठभूमि छवि की अस्पष्टता को बदलने के बजाय, आप पृष्ठभूमि छवि के शीर्ष पर एक अर्ध-पारदर्शी पृष्ठभूमि रंग के साथ एक ओवरले जोड़ते हैं।

HTML मार्कअप पिछले समाधान जैसा ही होगा। CSS में, आप बैकग्राउंड-इमेज को सीधे पैरेंट एलिमेंट में सेट कर सकते हैं, बिना किसी अपारदर्शिता के।

माता-पिता के छद्म तत्व में तब अर्ध-पारदर्शी पृष्ठभूमि-रंग होगा।

यह background-color . सेट करके पूरा किया जाता है rgba() . का उपयोग कर संपत्ति सिंटैक्स, जहां पहले तीन वर्ण आरजीबी रंग संख्याएं हैं, और अंतिम संख्या अल्फा या पारदर्शिता सेटिंग है। हम 0,0,0 . का उपयोग कर रहे हैं RGB रंग के लिए, जिसका अनुवाद काला होता है।

एक अल्फा मान 0 . से हो सकता है (0% अस्पष्टता) से 1 . तक (100% अस्पष्टता)। तो 0.25 . का हमारा मूल्य परिणामस्वरूप 25% अस्पष्टता का ओवरले होगा।

यहां बताया गया है कि यह कोड में कैसा दिखेगा:

.hero { 
    position: relative; 
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://placekitten.com/1200/800');
    background-size: cover;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.25);
}

परिणाम इस तरह दिखेगा:

और यहाँ इस ओवरले समाधान के लिए कोडपेन है!

दोनों समाधानों का एक समान दिखने वाला परिणाम है। पहले समाधान में पृष्ठभूमि छवि 75% अस्पष्टता पर सेट है। और दूसरा समाधान 25% अस्पष्टता पर एक काला ओवरले जोड़ता है। इसलिए वे बिल्कुल एक जैसे नहीं हैं, लेकिन वे एक जैसे हैं।

यदि आप पृष्ठभूमि छवि में एक टोंड रंग जोड़ना चाहते हैं तो ओवरले समाधान भी आसान है। अगर हम ओवरले background-color सेट करते हैं तो यह कैसा दिखेगा करने के लिए rgba(152, 66, 211, 0.63) :