सीएसएस के साथ ग्रेस्केल पृष्ठभूमि छवियां कैसे बनाएं

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

क्रॉस-ब्राउज़र CSS3 फ़िल्टर

किसी पृष्ठभूमि को ग्रेस्केल करने का सबसे सीधा तरीका छवि CSS3 फ़िल्टर ग्रेस्केल लागू करने के लिए है:

-webkit-filter: grayscale(100%);

हालाँकि, यह तकनीक केवल Chrome v.15 और Safari v.6 में काम करती है ब्राउज़र संगतता सीमाएँ।

क्रॉस-ब्राउज़र एसवीजी फ़िल्टर

क्रॉस-ब्राउज़र ग्रेस्केल प्रभाव प्राप्त करने के लिए, आप एसवीजी फ़िल्टर का उपयोग कर सकते हैं:

filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

यह समाधान फ़ायरफ़ॉक्स, क्रोम और एज सहित अधिकांश प्रमुख ब्राउज़रों में काम करता है।

jQuery एनीमेशन

यदि आप जावास्क्रिप्ट का उपयोग करके गतिशील रूप से ग्रेस्केल प्रभाव को टॉगल करना चाहते हैं, तो आप jQuery को नियोजित कर सकते हैं:

$(".nongrayscale").hover(function () {
  $(this).addClass("grayscale").fadeTo(400, 1);
});
$(".grayscale").hover(function () {
  $(this).removeClass("grayscale").fadeTo(400, 1);
});

यह कोड एक ग्रेस्केल क्लास जोड़ देगा और इस पर होवर करने पर छवि फीकी पड़ जाएगी।

IE10-11 संगतता

इंटरनेट एक्सप्लोरर 10-11 में, उपरोक्त एसवीजी फ़िल्टर तकनीक काम नहीं करती. इसके बजाय, आप एक डीसैचुरेशन फ़िल्टर का उपयोग कर सकते हैं:

<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
  <feColorMatrix type="saturate" values="0" />
</filter>

इस फ़िल्टर को फ़िल्टर विशेषता का उपयोग करके छवियों पर लागू किया जा सकता है।

इन तरीकों का उपयोग करके, आप आसानी से सीएसएस में ग्रेस्केल पृष्ठभूमि छवियों को अपने वेब पर एक कालातीत स्पर्श जोड़ सकते हैं। क्रॉस-ब्राउज़र संगतता बनाए रखते हुए डिज़ाइन।