स्टाइल फिल्टर गुण

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

filter गुण को छवि पर विशेष प्रभाव (जैसे धुंधली और सततता) जोड़े।

और देखें:

CSS संदर्भ पुस्तक:filter गुण

उदाहरण

छवि का रंग को श्वेत-सफेद (100% ग्रे) करें:

document.getElementById("myImg").style.filter = "grayscale(100%)";

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

व्याकरण

filter गुण वापस करें:

object.style.filter

filter गुण सेट करें:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

फिल्टर फ़ंक्शन

टिप्पणी:फिल्टर का उपयोग करते समय प्रतिशत मान (जैसे 75%) को दशांश मान (यानी 0.75) भी स्वीकार किया जाता है।

फिल्टर वर्णन
none कोई प्रभाव नहीं है।
blur(px)

छवि पर धुंधली प्रभाव लगाएं। बड़े अनुपात के असरसे अधिक धुंधली प्रभाव होगा।

如果未规定值,则使用 0。

यदि मान निर्दिष्ट नहीं हो, तो 0 का उपयोग करें।%)

brightness(

0% छवि को पूरी तरह से काला करेगा。

100% (1) डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% से अधिक के मान से अधिक प्रकाशीयता वाला परिणाम मिलेगा。

contrast(%)

छवि की विरोधात्मकता को समायोजित करें।

0% छवि को पूरी तरह से काला करेगा。

100% (1) डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% से अधिक के मान से कम विरोधात्मकता वाला परिणाम मिलेगा。

drop-shadow(h-shadow v-shadow blur spread color)

छवि पर प्रक्षेपण प्रभाव लागू करें।

संभावित मान:

h-shadow हृदयवृत्तव्यास। अनुसार अनुसार करें। नकारात्मक मान शीट को छवि के बाईं ओर रखेगा。

v-shadow वृत्तव्यास। अनुसार अनुसार करें। नकारात्मक मान शीट को छवि के ऊपर रखेगा।

blur ब्लर। तीसरा मान अनुसार करें। यह शीट को धुंधला करेगा। अधिक मान अधिक धुंधलापन प्रदान करेगा (शीट बड़ा और चमकीला होगा)। नकारात्मक मान को अनुमान नहीं किया जाता है। यदि निर्दिष्ट नहीं हो, तो इसका मान 0 (शीट के किनारे तुरंत होगा) होगा。

spread स्प्रीड। वृत्तव्यास को अनुसार करें। सकारात्मक मान शीट को विस्तार करेगा और बड़ा करेगा, नकारात्मक मान शीट को कम करेगा और छोटा करेगा। यदि निर्दिष्ट नहीं हो, तो इसका मान 0 (शीट आकार के समान होगा) होगा。

टिप्पणी:Chrome, Safari और Opera, संभवतः अन्य ब्राउज़र चौथे लंबाई को असमर्थित करते हैं; यदि जोड़ा जाए, तो यह प्रदर्शित नहीं होगा。

colorवृत्तव्यास। शीट को रंग में जोड़ें। यदि निर्दिष्ट नहीं हो, रंग ब्राउज़र के आधार पर निर्धारित होगा (आमतौर पर काला है)।

सूचना:यह filter box-shadow गुण के समान है。

grayscale(%)

छवि को ग्रे स्केल में बदलें।

0% (0) डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% छवि को पूरी तरह से ग्रे करेगा (सफेद-सदा छवि के लिए उपयोग किया जाता है)。

टिप्पणी:नकारात्मक मूल्य नहीं अनुमता है।

hue-rotate(deg)

छवि पर टोन रोटेशन लागू करें। यह मान छवि के सैम्पल को चक्र पर समायोजित करने के लिए डिग्री परिभाषित करता है।

0deg डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

टिप्पणी:अधिकतम मान 360 डिग्री है。

invert(%)

छवि में सैम्पल को उल्टा करें।

0% (0) डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% छवि को पूरी तरह से उल्टा करेगा。

टिप्पणी:नकारात्मक मूल्य नहीं अनुमता है।

opacity(%)

छवि के अस्पष्टता स्तर को सेट करें। अस्पष्टता स्तर अस्पष्टता स्तर को वर्णित करता है, जिसमें:

0% पूरी तरह से पारदर्शी है。

100% (1) डिफ़ॉल्ट मान है, जो मूल छवि (ट्रांसपेरेंसी नहीं) को प्रदर्शित करता है。

टिप्पणी:नकारात्मक मूल्य नहीं अनुमता है।

सूचना:यह filter opacity गुण के समान है。

saturate(%)

छवि की सतता को समायोजित करें।

0% (0) छवि को पूरी तरह से अधिकृत नहीं करेगा。

100% डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% से अधिक के मान से अत्यधिक अधिकृत परिणाम मिलेगा。

टिप्पणी:नकारात्मक मूल्य नहीं अनुमता है।

sepia(%)

छवि को चूनी रंग में बदलें।

0% (0) डिफ़ॉल्ट मान है, जो मूल छवि को प्रदर्शित करता है。

100% पूरी तरह से चूनी रंग की तस्वीर प्रदान करेगा。

टिप्पणी:नकारात्मक मूल्य नहीं अनुमता है।

तकनीकी विवरण

CSS संस्करण: CSS3

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

इस तालिका में अनुक्रमित संख्याएँ पहली बार इस विशेषता को पूरी तरह से समर्थन देने वाले ब्राउज़र का संस्करण दर्शाती हैं。

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
53.0 13.0 35.0 9.1 40.0