CSS filter गुण

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

filter विशेषता एलिमेंट (आमतौर पर <img>) के दृश्य सक्रियता (जैसे धुंधलापन और सततता) को परिभाषित करती है।

इसके अलावा देखें:

CSS शिक्षा:CSS छवि

HTML DOM संदर्भ पुस्तिका:filter विशेषता

उदाहरण

सभी छवियों को श्वेत-सफेद (100% ग्रे) में बदलें:

img {
  filter: grayscale(100%);
}

आप खुद साफ़ी करें

सुझाव:साइट के नीचे अधिक TIY उदाहरण पाएँ।

CSS व्याकरण

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

सुझाव:अधिक फ़िल्टर का उपयोग करने के लिए, प्रत्येक फ़िल्टर को स्पेस से अलग करें (वेब पेज के नीचे के अधिक उदाहरणों को देखें)।

तकनीकी विवरण

डिफ़ॉल्ट मान: none
विरासत: नहीं
एनिमेशन निर्माण: समर्थित।देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS3
JavaScript व्याकरण: object.style.filter="grayscale(100%)"

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

टिप्पणी：प्रतिशत मान (उदाहरण के लिए 75％) के फ़िल्टर का उपयोग करें, इस मान को दशमलवीं (उदाहरण के लिए 0.75) के रूप में भी स्वीकार किया जाता है।

फ़िल्टर वर्णन
none डिफ़ॉल्ट मान।कोई प्रभाव निर्दिष्ट नहीं किया गया है।
blur(px)

छवि पर झिल्लीदार प्रभाव लगाएं।बड़े मान अधिक झिल्लीदारता प्रदान करेगा।

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

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

  • 0％ छवि पूरी तरह से काली कर देगा।
  • डिफ़ॉल्ट मान 100％ है, जो मूल छवि को प्रतिनिधित्व करता है।
  • 100％ से अधिक मान अधिक चमकीला परिणाम प्रदान करेगा।
contrast(%)

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

  • 0％ छवि पूरी तरह से काली कर देगा।
  • डिफ़ॉल्ट मान 100％ है, जो मूल छवि को प्रतिनिधित्व करता है।
  • 100％ से अधिक मान अधिक विरोधाभास परिणाम प्रदान करेगा।
drop-shadow(h-shadow v-shadow blur spread color)

छवि पर छाया प्रभाव लगाएं।

संभावित मान:

  • h-shadow - अनिवार्य।समानता छाया के पिक्सल मान को निर्दिष्ट करें।नकारात्मक मान छाया को छवि के बाईं ओर रखेगा।
  • v-shadow - अनिवार्य।अभिकलांछित छाया के पिक्सल मान को निर्दिष्ट करें।नकारात्मक मान छाया को छवि के ऊपर रखेगा।

blur - वृत्तीय।यह तीसरा मान है, इकाई पिक्सल होनी चाहिए।छाया को झिल्लीदार प्रभाव जोड़ें।मान बढ़ने के साथ बलूरता भी बढ़ती है (छाया बड़ी और चमकीली हो जाएगी)।नकारात्मक मान अनुमति नहीं है।यदि मान निर्दिष्ट नहीं होता है, 0 (छाया के किनारे तुरंत है) का उपयोग किया जाएगा।

spread - वृत्तीय।यह चौथा मान है, इकाई पिक्सल होनी चाहिए।धनात्मक मान छाया को विस्तार करके बढ़ाएगा, नकारात्मक मान छाया को सिकुड़ाएगा।यदि मान निर्दिष्ट नहीं होता है, 0 (छाया एलीमेंट के आकार के समान) का उपयोग किया जाएगा।

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

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

यह उदाहरण लाल छाया का निर्माण करता है, समानता और अभिकलांछित दिशाओं में 8px, 10px के झिल्लीदार प्रभाव के साथ:

filter: drop-shadow(8px 8px 10px red);

सुझाव:यह फ़िल्टर box-shadow गुण के समान है।
grayscale(%)

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

  • 0% (0) डिफ़ॉल्ट मूल्य है, जो मूल छवि को प्रतिनिधित्व करता है।
  • 100% छवि को पूरी तरह से ग्रे में बदल देगा (श्वेत-सफेद छवि के लिए इस्तेमाल किया जाता है)।

टिप्पणी：नकारात्मक मूल्य अनुमति नहीं है।
hue-rotate(deg)

छवि पर रंग फ़ेज़ घुमाएं। इस मान रंग चक्र के डिग्री को परिभाषित करता है। डिफ़ॉल्ट मान 0deg है, जो मूल छवि को प्रतिनिधित्व करता है।

टिप्पणी：अधिकतम मान 360deg है।
invert(%)

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

  • 0% (0) डिफ़ॉल्ट मूल्य है, जो मूल छवि को प्रतिनिधित्व करता है।
  • 100% छवि को पूरी तरह से उलट देगा।

टिप्पणी：नकारात्मक मूल्य अनुमति नहीं है।
opacity(%)

छवि के अवरोधकता स्तर सेट करें। opacity-level अवरोधकता स्तर को वर्णित करता है, जहां:

  • 0% पूरी तरह से पारदर्शी है।
  • 100% (1) डिफ़ॉल्ट मूल्य है और मूल छवि (अवरोधक) को प्रतिनिधित्व करता है।

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

सुझाव:यह फ़िल्टर opacity गुण के समान है।
saturate(%)

छवि की परिपूर्णता सेट करें।

  • 0% (0) 0% परिपूर्णता को पूरी तरह से नष्ट कर देगा।
  • 100% डिफ़ॉल्ट है और मूल छवि को प्रतिनिधित्व करता है।
  • 100% से अधिक मूल्य अत्यधिक परिपूर्णता परिणाम प्रदान करता है।

टिप्पणी：नकारात्मक मूल्य अनुमति नहीं है।
sepia(%)

छवि को भूरे रंग में बदलें।

  • 0% (0) डिफ़ॉल्ट मूल्य है, जो मूल छवि को प्रतिनिधित्व करता है।
  • 100％ छवि को पूरी तरह से भूरे रंग में बदल देगा।

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

url() फ़ंक्शन एक एक्सएमएल फ़िल्टर फ़ाइल का स्थान को निर्दिष्ट करता है और एक विशिष्ट फ़िल्टर एलेमेंट के लिंक को शामिल कर सकता है। उदाहरण:

filter: url(svg-url#element-id);
initial इस गुण को उसके डिफ़ॉल्ट मूल्य पर सेट करें। देखें initial।
inherit इस गुण को उसके माता एलेमेंट से अभिजात करें। देखें inherit।

अधिक उदाहरण

धुंधली उदाहरण

छवि पर धुंधली प्रभाव लगाएं:

img {
  filter: blur(5px);
}

आप खुद साफ़ी करें

धुंधली उदाहरण 2

धुंधली पृष्ठभूमि छवि लगाएं:

img.background {
  filter: blur(35px);
}

आप खुद साफ़ी करें

चमकीलापन उदाहरण

छवि की चमकीलापन समायोजित करें:

img {
  filter: brightness(200%);
}

आप खुद साफ़ी करें

विरोधकता उदाहरण

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

img {
  filter: contrast(200%);
}

आप खुद साफ़ी करें

शादो उदाहरण

छवि पर शादो प्रभाव लगाएं:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

आप खुद साफ़ी करें

ग्रे स्केल उदाहरण

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

img {
  filter: grayscale(50%);
}

आप खुद साफ़ी करें

रंग-विषमता उदाहरण

छवि पर रंग-विषमता घुमाएं:

img {
  filter: hue-rotate(90deg);
}

आप खुद साफ़ी करें

पलट उदाहरण

छवि के नमूनों को पलटें:

img {
  filter: invert(100%);
}

आप खुद साफ़ी करें

अस्पष्टता उदाहरण

छवि के अस्पष्टता स्तर को सेट करें:

img {
  filter: opacity(30%);
}

आप खुद साफ़ी करें

समर्थन उदाहरण

छवि के समर्थन को समायोजित करें:

img {
  filter: saturate(800%);
}

आप खुद साफ़ी करें

काला भूरा उदाहरण

छवि को काला भूरा बनाएं:

img {
  filter: sepia(100%);
}

आप खुद साफ़ी करें

बहुल फ़िल्टर का उपयोग करें

कई फ़िल्टरों का उपयोग करने के लिए विराम (स्पेस) का उपयोग करें।कृपया ध्यान दें कि क्रम अहम है (उदाहरण के लिए sepia() के बाद grayscale() का उपयोग करने से पूर्ण श्वेत संगमर्मर छवि पैदा होगी):

img {
  filter: contrast(200%) brightness(150%);
}

आप खुद साफ़ी करें

सभी फ़िल्टर

सभी फ़िल्टर फ़ंक्शनों को प्रदर्शित करें:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

आप खुद साफ़ी करें

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

तालिका में दिए गए आंकड़े पूर्ण समर्थन के लिए पहले ब्राउज़र संस्करण को सूचित करते हैं。

सांख्यिकी -webkit- से लिए गए आंकड़े पहली संस्करण को प्रयोग करने वाले प्रीफिक्स के उपयोग को सूचित करते हैं。

च्रोम IE / एजेंडा फ़ायरफॉक्स सैफारी ओपेरा
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

टिप्पणी：सबसे पुराने संस्करण के Internet Explorer (4.0 से 8.0) ने अब अप्रयोगी अस्टैंडर्ड "filter" गुण का समर्थन किया है।IE8 और उससे कम संस्करण के समर्थन के लिए इसे अस्पष्टता के लिए इस्तेमाल किया जाता है。