CSS grayscale() फ़ंक्शन

रोगदान और उपयोग

CSS का grayscale() फ़िल्टर फ़ंक्शन इमेज को ग्रे स्केल में बदलता है।

  • 100% (या 1) इमेज को पूरी तरह से ग्रे स्केल में बदल देगा
  • 0% (या 0) कोई प्रभाव नहीं होगा

उदाहरण

उदाहरण 1

इमेज को अलग-अलग ग्रे स्केल मान निर्धारित करें:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

अपने आप प्रयोग करें

उदाहरण 2

इसके लिए grayscale() और backdrop-filter गुणों का संयोजन:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

अपने आप प्रयोग करें

CSS व्याकरण

grayscale(amount)
मान वर्णन
amount

वृद्धि। ग्रे स्केल मान निर्दिष्ट करें, यह नंबर या प्रतिशत हो सकता है।

100% (या 1) एलिमेंट को पूरी तरह से ग्रे स्केल में बदल देता है।

0% (या 0) मूल इमेज (कोई प्रभाव नहीं) को प्रदर्शित करता है।

डिफ़ॉल्ट मान 1 है।

तकनीकी विवरण

संस्करण: CSS Filter Effects Module Level 1

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फ़ायरफ़ॉक्स सफारी ओपेरा
18 12 35 6 15

संबंधित पृष्ठ

संदर्भ:CSS फ़िल्टर गुण

संदर्भ:CSS blur() फ़ंक्शन

संदर्भ:CSS brightness() फ़ंक्शन

संदर्भ:CSS contrast() फ़ंक्शन

संदर्भ:CSS drop-shadow() फ़ंक्शन

संदर्भ:CSS hue-rotate() फ़ंक्शन

संदर्भ:CSS invert() फ़ंक्शन

संदर्भ:CSS opacity() फ़ंक्शन

संदर्भ:CSS saturate() फ़ंक्शन

संदर्भ:CSS sepia() फ़ंक्शन