स्टाइल फिल्टर गुण
- पिछला पृष्ठ emptyCells
- अगला पृष्ठ flex
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जेक्ट
परिभाषा और उपयोग
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 |
- पिछला पृष्ठ emptyCells
- अगला पृष्ठ flex
- एक स्तर ऊपर एचटीएमएल डॉम स्टाइल ऑब्जेक्ट