CSS contrast() फ़ंक्शन

रूपरेखा और उपयोग

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

  • 0% इमेज को पूरी तरह से ग्रे कर देगा
  • 100%（या 1）डिफ़ॉल्ट मान है, जो मूल इमेज को प्रदर्शित करता है
  • 100% से अधिक के मान विरोधकता को बढ़ाएंगे
  • 100% से कम के मान विरोधकता को कम करेंगे

उदाहरण

उदाहरण 1

इमेज की विरोधकता बढ़ाना और कम करना:

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

स्वयं आया आजा

उदाहरण 2

द्वारा contrast() और backdrop-filter गुणों का संयोजन:

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

स्वयं आया आजा

CSS व्याकरण

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

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

0% वस्तु को पूरी तरह से ग्रे कर देगा。

100%（या 1）डिफ़ॉल्ट मान है, जो मूल इमेज (बिना प्रभाव) को दर्शाता है。

100% से अधिक के मान विरोधकता को बढ़ाएंगे, 100% से कम के मान विरोधकता को कम करेंगे。

तकनीकी विवरण

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

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

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

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

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

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

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

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

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

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

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

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

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

संदर्भःCSS सेटरेट() फ़ंक्शन

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