CSS3 के मिश्रण-मिश्रण-मोड के साथ छवि पर पाठ कैसे प्रदर्शित करें

छवि पृष्ठभूमि बड़े प्रदर्शन ग्रंथों के पीछे बहुत अच्छे लगते हैं। हालाँकि, इसका CSS कार्यान्वयन सीधा नहीं है। हम उपयोग कर सकते हैं पृष्ठभूमि-क्लिप: पाठ; संपत्ति, हालांकि यह अभी भी पर्याप्त ब्राउज़र समर्थन के बिना एक प्रयोगात्मक सुविधा है.

एक पाठ के पीछे एक छवि पृष्ठभूमि दिखाने के लिए सीएसएस विकल्प है का उपयोग करते हुए मिश्रण मिश्रण मोड संपत्ति. HTML तत्वों के लिए ब्लेंड मोड इंटरनेट एक्सप्लोरर जैसे कुछ के अपवाद के साथ सभी आधुनिक डेस्कटॉप और मोबाइल ब्राउज़रों में काफी समर्थित हैं.

इस पोस्ट में, हम यह देखने जा रहे हैं कि कैसे मिश्रण मिश्रण मोड (इसके दो तरीके विशेष रूप से) काम करते हैं, और आप इसे कैसे उपयोग कर सकते हैं छवि पृष्ठभूमि के साथ एक पाठ प्रदर्शित करें दो उपयोग मामलों में:

1. जब पृष्ठभूमि छवि देखा जा सकता है पाठ के माध्यम से
2. जब पृष्ठभूमि छवि चारों ओर चलता है ये पाठ

नीचे डेमो में कुछ उदाहरण देखें (चित्र unsplash.com से हैं).

मिश्रण मिश्रण मोड सीएसएस संपत्ति परिभाषित करती है कि कैसे सामग्री और यह पृष्ठभूमि HTML तत्व का होना चाहिए एक साथ मिश्रण रंग.

सम्मिश्रण मोड की सूची पर एक नज़र डालें, जिसमें से हम उपयोग करेंगे गुणा करना तथा स्क्रीन इस पोस्ट में.

सबसे पहले, आइए देखें कि ये दो विशिष्ट मिश्रण मोड कैसे काम करते हैं.

किस तरह गुणा करना और स्क्रीन ब्लेंड मोड काम करते हैं

सम्मिश्रण मोड तकनीकी रूप से कार्य हैं एक अंतिम रंग मान की गणना करें एक तत्व और इसकी पृष्ठभूमि के रंग घटकों का उपयोग करना.

गुणा करना मिश्रण मोड

में गुणा करना मिश्रण मोड, तत्वों के व्यक्तिगत रंग और उनकी पृष्ठभूमि हैं गुणा किया हुआ, और परिणामी रंग को अंतिम मिश्रित संस्करण पर लागू किया जाता है.

गुणा करना ब्लेंड मोड की गणना निम्न सूत्र के अनुसार की जाती है:

B (Cb, Cs) = Cb × Cs

कहा पे:सीबी - पृष्ठभूमि का रंग घटकसी - स्रोत तत्व का रंग घटकबी - सम्मिश्रण समारोह

कब सीबी तथा सी गुणा किया जाता है, जिसके परिणामस्वरूप रंग इन दो रंग घटकों का एक मिश्रण है, और है दो रंगों के रूप में सबसे अंधेरा.

अपनी टेक्स्ट इमेज बैकग्राउंड बनाने के लिए, हमें केस पर ध्यान देने की जरूरत है सी (स्रोत तत्व का रंग घटक) है या तो काला या सफेद.

अगर सी है काली इसका मूल्य है 0, आउटपुट का रंग भी काला होगा, क्योंकि सीबी × 0 = 0. तो, जब तत्व काले रंग का है, तो यह कोई फर्क नहीं पड़ता कि पृष्ठभूमि क्या रंग है, सम्मिश्रण काला होने के बाद हम सभी देख सकते हैं.

अगर सी है सफेद इसका मूल्य है 1, आउटपुट रंग जो भी हो सीबी क्योंकिसीबी × 1 = सीबी. तो इस मामले में हम सीधे पृष्ठभूमि को देखते हैं ज्यों का त्यों.

स्क्रीन मिश्रण मोड

स्क्रीन ब्लेंड मोड इसी तरह काम करता है गुणा करना मिश्रण मोड, लेकिन विपरीत परिणाम के साथ. तो, ए काला अग्रभूमि पृष्ठभूमि दिखाता है ज्यों का त्यों, और ए सफेद अग्रभूमि सफेद दिखाता है जो कुछ भी पृष्ठभूमि के साथ.

आइए जल्दी से इसका सूत्र देखें:

B (Cb, Cs) = Cb + Cs - (Cb × Cs)

कब सी है काली (0), सम्मिश्रण के बाद पृष्ठभूमि रंग दिखाया जाएगा:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

कब सी है सफेद (1) परिणाम किसी भी पृष्ठभूमि के साथ सफेद होगा, जैसे:

Cb + 1 - (Cb × 1) = Cb + 1 - Cb = 1

1. पाठ के माध्यम से दिखाया गया चित्र

इसकी पृष्ठभूमि छवि के माध्यम से पाठ प्रदर्शित करने के लिए, हम इसका उपयोग करते हैं स्क्रीन मिश्रण मोड साथ में काला पाठ तथा सफेद आसपास का स्थान.

 
 
पानी
 
 

 .पृष्ठभूमि चौड़ाई: 600px; ऊंचाई: 210 पीएक्स; पृष्ठभूमि-छवि: url (someimage.jpg); पृष्ठभूमि का आकार: 100%; मार्जिन: ऑटो;  .टेक्स्ट color: black; पृष्ठभूमि-रंग: सफेद; मिश्रण-मिश्रण-मोड: स्क्रीन; चौड़ाई: 100%; ऊंचाई: 100%; फ़ॉन्ट-आकार: 160pt; फ़ॉन्ट-वजन: बोल्डर; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 210px; मार्जिन: 0;  

वर्तमान में हमारा पाठ नीचे की तरह दिखता है, अगले चरण में हम पृष्ठभूमि में कस्टम रंग जोड़ेंगे.

रंग जोड़ना

जैसा कि आप अब तक अनुमान लगा चुके हैं, मिश्रण मोड का उपयोग करके हमें पाठ के चारों ओर के क्षेत्र के लिए केवल दो रंग पसंद हैं - काला या सफेद. हालाँकि सफेद रंग के साथ, इसमें कुछ रंग जोड़ना संभव है एक ओवरले का उपयोग करना, यदि ओवरले रंग उपयोग की गई छवि के साथ अच्छी तरह मेल खाता है.

आसपास के क्षेत्र में रंग जोड़ने के लिए, ए जोड़ें

HTML के लिए एक ओवरले के लिए, और दे दो उच्च पारदर्शिता के साथ पृष्ठभूमि का रंग. का भी उपयोग करें मिश्रण-मिश्रण-मोड: गुणा करें ओवरले के लिए संपत्ति, क्योंकि यह ओवरले की पृष्ठभूमि के रंग में मदद करता है थोड़ा बेहतर मिश्रण करें पाठ के अंदर दिखने वाली छवि के साथ.

 
 
पानी
 
 
 

 .ओवरले पृष्ठभूमि-रंग: rgba (0,255,255, .1); मिश्रण-मिश्रण-मोड: गुणा; चौड़ाई: 100%; ऊंचाई: 100%; स्थिति: निरपेक्ष; शीर्ष: 0;  

इस तकनीक से, हम चित्र पृष्ठभूमि के साथ पाठ के आसपास के क्षेत्र को रंग सकते हैं:

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

2. छवि पृष्ठभूमि से घिरा हुआ पाठ

हालांकि एक छवि पृष्ठभूमि पर एक सामान्य पाठ प्लेसमेंट उसी तकनीक की आवश्यकता है, मैं आपको एक उदाहरण दिखाने जा रहा हूं कि उपरोक्त डेमो कैसा दिखता है जब ए प्रभाव उलटा है, यानी जब टेक्स्ट का रंग सफेद हो और बैकग्राउंड काला हो.

 .पाठ रंग: सफेद; पृष्ठभूमि-रंग: काला; मिश्रण-मिश्रण-मोड: स्क्रीन; चौड़ाई: 100%; ऊंचाई: 100%; फ़ॉन्ट-आकार: 160pt; फ़ॉन्ट-वजन: बोल्डर; पाठ-संरेखण: केंद्र; लाइन-ऊँचाई: 210px; मार्जिन: 0;  

आप उपयोग कर सकते हैं वही ओवरले पाठ में कुछ रंग जोड़ने के लिए, जब तक आप इसे सफेद नहीं रखना चाहते.

 .ओवरले पृष्ठभूमि-रंग: rgba (0,255,255, .1); मिश्रण-मिश्रण-मोड: गुणा; चौड़ाई: 100%; ऊंचाई: 100%; स्थिति: निरपेक्ष; शीर्ष: 0;  

और नीचे आप देख सकते हैं कि रिवर्स केस कैसा दिखता है:

ध्यान दें कि इंटरनेट एक्सप्लोरर, या किसी अन्य ब्राउज़र में जो समर्थन नहीं करता है मिश्रण मिश्रण मोड संपत्ति, छवि पृष्ठभूमि दिखाई नहीं देगी और पाठ काला (या सफ़ेद) रहेगा.