CSS saturate() फ़ंक्शन

परिभाषा और उपयोग

CSS का saturate() फ़िल्टर फ़ंक्शन एलिमेंट की संतृप्ति (रंग की तीव्रता) को समायोजित करते हैं。

  • 0%（या 0）एलिमेंट पूरी तरह से निष्क्रिय कर देगा
  • 100%（या 1）कोई प्रभाव नहीं होगा
  • 200%（या 2）एलिमेंट को अतिरेखी संतृप्ति देगा

इन्स्टांस

उदाहरण 1

इमेज को अलग-अलग संतृप्ति सेट करें:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

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

उदाहरण 2

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

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

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

CSS व्याकरण

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

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

0%（या 0）एलिमेंट पूरी तरह से निष्क्रिय कर देगा。

100%（या 1）कोई प्रभाव नहीं होगा。

100% से अधिक मूल्य अतिरेखी प्रभाव प्रदान करेगा。

तकनीकी विवरण

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

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

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

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

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

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

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

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

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

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

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

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

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

संदर्भ:CSS ऑप्पासिटी() फ़ंक्शन

संदर्भ:CSS सेपिया() फ़ंक्शन