HTML / CSS में एक छवि को ग्रेस्केल में बदलें

619

क्या केवल ग्रेस्केल में रंग बिटमैप प्रदर्शित करने का एक सरल तरीका है HTML/CSS?

यह IE- संगत होने की आवश्यकता नहीं है (और मुझे लगता है कि यह नहीं होगा) - अगर यह FF3 और / या Sf3 में काम करता है, तो यह मेरे लिए काफी अच्छा है।

मुझे पता है कि मैं इसे SVGऔर कैनवस दोनों के साथ कर सकता हूं , लेकिन यह अभी बहुत काम की तरह लगता है।

क्या वास्तव में आलसी व्यक्ति ऐसा करने का तरीका है?

image css grayscale

— केन
स्रोत

14

"यह आईई-संगत होने की आवश्यकता नहीं है (और मुझे लगता है कि यह नहीं होगा)" ?? IE 1997 (IE4) के बाद से DX फिल्टरों का एक सेट प्रदान कर रहा है जो मात्र CSS और बहुत कुछ के साथ यह काम करता है। अब उन्होंने IE10 में डीएक्स फिल्टर गिरा दिया है और मानक एसवीजी आधारित फिल्टर का सख्ती से पालन कर रहे हैं। आप इस और इस डेमो पर एक नज़र डालना चाह सकते हैं ।

— वल्कन रैन

8

@vulcanraven यदि आप IE में सक्रिय स्क्रिप्टिंग को निष्क्रिय करते हैं तो यह केवल 'सीएसएस' नहीं है - फिल्टर काम करना बंद कर देते हैं।

— रॉबर्ट

3

@robertc, सही के बारे में thats। इसके विपरीत, यदि आप किसी भी ब्राउज़र में जावास्क्रिप्ट को निष्क्रिय कर देते हैं, तो Stackoverflow सहित लगभग हर RIA काम करना बंद कर देगा (जब तक कि वेब डेवलपर ने HTML-केवल संस्करण को लागू नहीं किया है)।

— वल्केन रैवेन

2

बस CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… का उपयोग करें इस प्रश्न में मेरे उत्तर प्राप्त करें

— Sakata Gintoki

728

CSS फिल्टर के लिए समर्थन वेबकिट में उतरा है। इसलिए अब हमारे पास एक क्रॉस-ब्राउज़र समाधान है।

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="http://lorempixel.com/400/200/">

स्निपेट का विस्तार करें

इंटरनेट एक्सप्लोरर 10 के बारे में क्या?

आप पॉलिफ़िल जैसे ग्रे का उपयोग कर सकते हैं ।

— सलमान अब्बास
स्रोत

1

@CamiloMartin CSS फ़िल्टर केवल Chrome 18+

— सलमान वॉन अब्बास

2

अपडेट: Google Chrome का नवीनतम स्थिर संस्करण (19) अब CSS फ़िल्टर का समर्थन करता है। वाह! =)

— सलमान वॉन अब्बास

6

क्या ओपेरा के लिए कोई समाधान है?

— रुस्तम

23

तो, IE10 के लिए क्या उपाय है?

— टॉम ऑलर

2

पोस्टरिटी के लिए: @TomAuger, इस Q & A में IE10 के लिए विशिष्ट निर्देश हैं।

— बार्नी

127

इसके बाद Brightout.com के उत्तर से , और रोमन नुरिक के उत्तर से , और कुछ हद तक 'एसवीजी' की आवश्यकता को शिथिल करते हुए, आप फ़ायरफ़ॉक्स में केवल एक एसवीजी फ़ाइल और कुछ सीएसएस का उपयोग करके छवियों को हटा सकते हैं।

आपकी SVG फाइल इस तरह दिखाई देगी:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

संसाधनों के रूप में सहेजें। svg, इसे अब से पुन: उपयोग किया जा सकता है किसी भी छवि के लिए जिसे आप greyscale में बदलना चाहते हैं।

अपने सीएसएस में आप फ़ायरफ़ॉक्स विशिष्ट filterसंपत्ति का उपयोग करके फ़िल्टर का संदर्भ देते हैं:

.target {
    filter: url(resources.svg#desaturate);
}

यदि आप ऐसा महसूस करते हैं, तो एमएस मालिकाना भी जोड़ें, उस वर्ग को किसी भी छवि पर लागू करें जिसे आप greyscale में परिवर्तित करना चाहते हैं (फ़ायरफ़ॉक्स> 3.5, IE8 में काम करता है) ।

संपादित करें : यहां एक अच्छा ब्लॉग पोस्ट है जो filterयहां वर्णित एसवीजी दृष्टिकोण के साथ सलमानपाक के उत्तर में नई CSS3 संपत्ति का उपयोग करता है। उस दृष्टिकोण का उपयोग करके आप कुछ इस तरह समाप्त होंगे:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

आगे ब्राउज़र यहाँ जानकारी का समर्थन करता है ।

— robertc
स्रोत

6

वेबकिट में आप ऐसा करते हैं: -webkit-filter: grayscale(100%);फिर इसे: -webkit-filter: grayscale(0);इसे हटाने के लिए।

— सीनजा

@SJJA अपडेट के लिए धन्यवाद, WebKit ने दिसंबर में

— robertc

मैं इसे अपने linux लैपटॉप और win7 मशीन दोनों पर क्रोम बीटा में देखता हूं। यह लिनक्स में क्रोम स्थिर में काम नहीं करता था (लेकिन फिर से, यह संभव है कि लिनक्स का संस्करण विंडोज़ के पीछे है)।

— सीनजा

1

यह विधि क्रोम में मेरे लिए ठीक काम करती है, लेकिन सफारी में इसका कोई प्रभाव नहीं है। FF में, यह मेरी छवियों को होवर तक अदृश्य बना रहा है।

— कोलमटाइट

85

फ़ायरफ़ॉक्स के लिए आपको filter.svg फ़ाइल बनाने की आवश्यकता नहीं है, आप डेटा URI योजना का उपयोग कर सकते हैं ।

पहले उत्तर का css कोड लेने पर देता है:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

अपनी फ़ाइल एन्कोडिंग द्वारा "utf-8" स्ट्रिंग को बदलने का ध्यान रखें।

यह विधि अन्य की तुलना में तेज़ होनी चाहिए क्योंकि ब्राउज़र को दूसरे HTTP अनुरोध करने की आवश्यकता नहीं होगी।

— mquandalle
स्रोत

3

सिरदर्द को बचाने के लिए बस एक नोट: डेटा यूरल्स में YUI कंप्रेसर स्ट्रिप्स रिक्त स्थान। यदि आप इस समाधान का उपयोग करना चाहते हैं, तो आप किसी अन्य मिनिफायर का उपयोग करने पर विचार कर सकते हैं।

— माल्ट

6

@ मैलेट या शायद केवल "% 20" स्ट्रिंग द्वारा स्थान बदलें?

— 23

@mquandalle दुर्भाग्य से IE10 फिल्टर का समर्थन नहीं करता है: ग्रे ब्लॉगs.msdn.com/b/ie/archive/2011/12/07/…

— Jedi.za

1

फ़ायरफ़ॉक्स पर मेरा ग्रे बहुत हल्का है। क्या इसके विपरीत को बढ़ाने या इसे थोड़ा कम करने का कोई तरीका है? अन्य ब्राउज़र बहुत अच्छे लगते हैं।

— square_eyes

27

अपडेट: मैंने इसे एक पूर्ण GitHub रेपो में बनाया, जिसमें IE10 और IE11 के लिए जावास्क्रिप्ट पॉलीफिल शामिल है: https://github.com/karlhorky/gray

मैंने मूल रूप से SalmanPK के उत्तर का उपयोग किया था , लेकिन फिर SVG फ़ाइल के लिए आवश्यक अतिरिक्त HTTP अनुरोध को समाप्त करने के लिए नीचे भिन्नता बनाई। इनलाइन एसवीजी फ़ायरफ़ॉक्स संस्करणों में 10 और उससे ऊपर के संस्करणों में काम करती है, और 10 से कम संस्करण वैश्विक ब्राउज़र बाजार के 1% के लिए भी नहीं है।

मैं तब से इस ब्लॉग पोस्ट पर समाधान को अपडेट कर रहा हूं , रंग में वापस लुप्त होने के लिए समर्थन जोड़ना, एसवीजी के साथ IE 10/11 का समर्थन, और डेमो में आंशिक ग्रेस्केल।

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

— कार्ल होर्की
स्रोत

14

यदि आप जावास्क्रिप्ट का उपयोग करने में सक्षम हैं, तो यह स्क्रिप्ट वह हो सकती है जिसे आप खोज रहे हैं। यह क्रॉस ब्राउज़र काम करता है और मेरे लिए अब तक ठीक काम कर रहा है। आप इसे किसी अन्य डोमेन से लोड की गई छवियों के साथ उपयोग नहीं कर सकते।

http://james.padolsey.com/demos/grayscale/

— chrismacp
स्रोत

11

बस आज वही समस्या है। मैंने शुरुआत में SalmanPK समाधान का उपयोग किया है, लेकिन यह पता चला है कि प्रभाव FF और अन्य ब्राउज़रों के बीच भिन्न होता है। ऐसा इसलिए है क्योंकि रूपांतरण मैट्रिक्स हल्केपन पर काम करता है केवल क्रोम / IE में फिल्टर की तरह चमक नहीं। मेरे आश्चर्य के लिए मुझे पता चला है कि SVG में वैकल्पिक और सरल समाधान FF4 + में भी काम करता है और बेहतर परिणाम देता है:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

सीएसएस के साथ:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

एक और चेतावनी यह है कि IE10 मानकों के अनुरूप मोड में "फिल्टर: ग्रे:" का समर्थन नहीं करता है, इसलिए काम करने के लिए हेडर में संगतता मोड स्विच की आवश्यकता है:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

— Robertt
स्रोत

2

एक बेहतर, सरल उपाय लगता है - अच्छा होगा यदि सलमानपीके और मक्कलैंड ने इसके समाधान को अपडेट किया। जाहिरा तौर पर वे जिस मैट्रिक्स का उपयोग करते हैं वह टूटा हुआ है <br> <br> यहाँ एम्बेडेड डेटा संस्करण है:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");

— psdie

11

CSS के साथ विशेष रूप से ग्रेस्केल प्राप्त करने का सबसे सरल तरीका filterसंपत्ति के माध्यम से है।

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

संपत्ति अभी भी पूरी तरह से समर्थित नहीं है और अभी भी -webkit-filterसभी ब्राउज़रों के समर्थन के लिए संपत्ति की आवश्यकता है।

— एनके चौधरी
स्रोत

7

ऐसा नहीं लगता कि यह CSS3 या मालिकाना -webkit-या -moz-सीएसएस गुणों के साथ भी (अभी तक) संभव है ।

हालाँकि, मुझे यह पोस्ट पिछले जून से मिली जिसमें HTML पर SVG फ़िल्टर का उपयोग किया गया था। किसी भी वर्तमान ब्राउज़र में उपलब्ध नहीं है (डेमो एक कस्टम WebKit बिल्ड में संकेत दिया गया है), लेकिन अवधारणा के प्रमाण के रूप में बहुत प्रभावशाली है।

— रोमन नुरिक
स्रोत

7

उन लोगों के लिए जो अन्य उत्तर में IE10 + समर्थन की अनदेखी के बारे में पूछ रहे हैं, CSS के इस टुकड़े की जाँच करें:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

इस मार्कअप पर लागू:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

अधिक डेमो के लिए, चेकआउट IE टेस्टड्राइव के CSS3 ग्राफिक्स अनुभाग और इस पुराने IE ब्लॉग http://blogs.msdn.com/b/ie/archive/2011/10/10/14/svg-filter-effects-in-ie10.aspx

— एनी
स्रोत

7

Internet Explorer में फ़िल्टर गुण का उपयोग करें।

वेबकिट और फ़ायरफ़ॉक्स में वर्तमान में CSS के साथ पूरी तरह से एक चित्र को हटाने का कोई तरीका नहीं है। इसलिए आपको क्लाइंट साइड समाधान के लिए या तो कैनवास या एसवीजी का उपयोग करना होगा।

लेकिन मुझे लगता है कि एसवीजी का उपयोग करना अधिक सुरुचिपूर्ण है। फ़ायरफ़ॉक्स और वेबकिट दोनों के लिए काम करने वाले एसवीजी समाधान के लिए मेरी ब्लॉग पोस्ट देखें : http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

और एसवीजी के बाद से सख्ती से बोल रहा है एचटीएमएल समाधान शुद्ध एचटीएमएल + सीएसएस है :-)

— brillout
स्रोत

हाय शानदार मैंने देखा कि वास्तव में आपका ग्रेस्केल सफारी में विफल रहता है। कोई फॉलोअप? धन्यवाद

— हंस

1

SVG HTML नहीं है । यह बिल्कुल अलग कल्पना है।

— कैमिलो मार्टिन

@CamiloMartin यहाँ HTML युक्ति में SVG है ।

— robertc

1

@robertc यह लिंक एक HTML में एक SVG डालने के बारे में है, लेकिन यहाँ SVG युक्ति और यहाँ HTML युक्ति है । तथ्य यह है कि दोनों एक-दूसरे के समान हैं (या, एक्सएमएल के लिए) इसका मतलब यह नहीं है कि वे एक ही चीज हैं ...

— कैमिलो मार्टिन

1

लेकिन यह संदर्भ में एसवीजी कल्पना से जोड़ता है ... यह एसवीजी को परिभाषित नहीं करता है, बस कहता है कि ब्राउज़र को इसे पार्स करना चाहिए। यह उस संबंध में जावास्क्रिप्ट या सीएसएस की तरह है।

— कैमिलो मार्टिन

6

ऐसा करने का एक नया तरीका पिछले कुछ समय से आधुनिक ब्राउज़रों पर उपलब्ध है।

पृष्ठभूमि-मिश्रण-मोड आपको कुछ दिलचस्प प्रभाव प्राप्त करने की अनुमति देता है, और उनमें से एक ग्रेस्केल रूपांतरण है

एक सफेद पृष्ठभूमि पर निर्धारित मूल्य चमकदारता , इसकी अनुमति देता है। (यह ग्रे में देखने के लिए मँडरा)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

<div class="test"></div>

स्निपेट का विस्तार करें

चमक छवि से ली गई है, रंग पृष्ठभूमि से लिया गया है। चूंकि यह हमेशा सफेद होता है, कोई रंग नहीं होता है।

लेकिन यह बहुत अधिक की अनुमति देता है।

आप 3 परतों को स्थापित करने वाले प्रभाव को चेतन कर सकते हैं। पहला एक चित्र होगा, और दूसरा एक सफेद-काला ढाल होगा। यदि आप इस पर एक गुणा मिश्रण मोड लागू करते हैं, तो आपको सफेद भाग पर पहले की तरह एक सफेद परिणाम मिलेगा, लेकिन काले हिस्से पर मूल छवि (सफेद रंग से गुणा सफेद देता है, काले रंग से गुणा करने का कोई प्रभाव नहीं होता है।)

ढाल के सफेद भाग पर, आपको पहले जैसा ही प्रभाव मिलता है। ग्रेडिएंट के काले भाग पर, आप छवि को अपने ऊपर ब्लेंड कर रहे हैं, और परिणाम अनमॉडिफाइड इमेज है।

अब, इस प्रभाव को गतिशील बनाने के लिए ढाल को स्थानांतरित करने के लिए सभी आवश्यक है: (रंग में देखने के लिए हॉवर)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

स्निपेट का विस्तार करें

संदर्भ

संगतता मैट्रिक्स

— Vals
स्रोत

1

@Andy मैं कह रहा मेरा उत्तर शुरू हुआ आधुनिक ब्राउज़रों में

— Vals

आप यह कैसे लागू कर सकते हैं कि अगर किसी imgटैग का उपयोग छवि के लिए नहीं किया गया हैbackground: url()

— मोहम्मद एल्बानना

1

@MohammadElbanna आपको बैकग्राउंड-ब्लेंड-मोड के बजाय मिक्स-ब्लेंड-मोड का उपयोग करने की आवश्यकता है

— Vals

5

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

— Amee
स्रोत

4

शायद इस तरह आपकी मदद करें

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

— Yuza
स्रोत

3

यह वास्तव में IE के साथ ऐसा करने के लिए आसान है अगर मुझे एक मालिकाना सीएसएस संपत्ति का उपयोग करके सही ढंग से याद है। Http://www.ssi-developer.net/css/visual-filters.shtmlFILTER: Gray से यह कोशिश करें

कुल्हाड़ी द्वारा विधि बस छवि को पारदर्शी बनाती है और इसके पीछे एक काली पृष्ठभूमि होती है। मुझे यकीन है कि आप तर्क दे सकते हैं कि यह ग्रेस्केल है।

यद्यपि आप जावास्क्रिप्ट का उपयोग नहीं करना चाहते थे, मुझे लगता है कि आपको इसका उपयोग करना होगा। आप इसे करने के लिए एक सर्वर साइड भाषा का भी उपयोग कर सकते हैं।

— एलेक्स
स्रोत

मेरे पास एक विंडोज बॉक्स भी नहीं है, इसलिए धन्यवाद, लेकिन यह मेरे लिए बहुत कम उपयोग है।

— केन

उस स्थिति में, आप इसे IE के साथ एक वर्चुअल मशीन के साथ देख सकते हैं, कुल्हाड़ी की विधि को लागू कर सकते हैं या कैनवास का उपयोग कर सकते हैं ... ध्यान दें कि कैनवास के साथ बड़ी छवियों पर ग्रेस्केलिंग जावास्क्रिप्ट इंजन पर काफी कर हो सकती है।

— एलेक्स

7

filter: grayसंस्करण 4 के बाद से इंटरनेट एक्सप्लोरर में मौजूद है । उन्होंने अपने उत्पाद के लिए बहुत सी बकवास ली है - ठीक है! - लेकिन वे वास्तव में इस सामान के साथ अपने समय से आगे थे

— पेक्का

2

यदि आप जावास्क्रिप्ट का उपयोग करने के लिए तैयार हैं, तो आप छवि को ग्रेस्केल में बदलने के लिए कैनवास का उपयोग कर सकते हैं। चूंकि फ़ायरफ़ॉक्स और सफारी समर्थन करते हैं <canvas>, इसलिए इसे काम करना चाहिए।

इसलिए मैंने "कैनवास ग्रेस्केल" को देखा, और पहला परिणाम था http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html ।

— शालोम क्रेमर
स्रोत

2

वेबकिट में देशी सीएसएस फिल्टर का समर्थन वर्तमान संस्करण 19.0.1084.46 से जोड़ा गया है

so -webkit- फ़िल्टर: ग्रेस्केल (1) काम करेगा और जो वेबकिट के लिए SVG दृष्टिकोण की तुलना में आसान है ...

— hjindal
स्रोत

2

यहाँ LESS के लिए एक मिश्रण है जो आपको किसी भी अस्पष्टता का चयन करने देगा। अलग-अलग प्रतिशत पर सादे सीएसएस के लिए अपने आप को चर में भरें।

नीट संकेत , यह मैट्रिक्स के लिए संतृप्त प्रकार का उपयोग करता है ताकि आपको प्रतिशत बदलने के लिए कुछ भी फैंसी करने की आवश्यकता न हो।

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

फिर इसका उपयोग करें:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}

— जेम्स वैन डाइक
स्रोत

2

पूर्ण उपयोग के लिए आपको कई उपसर्गों का उपयोग करने की आवश्यकता नहीं है, क्योंकि यदि आप पुराने फ़ायरफ़ॉक्स के लिए उपसर्ग चुनते हैं, तो आपको नए फ़ायरफ़ॉक्स के लिए उपसर्ग का उपयोग करने की आवश्यकता नहीं है।

इसलिए पूर्ण उपयोग के लिए, इस कोड का पर्याप्त उपयोग करें:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}

— माटो
स्रोत

2

अन्य उत्तरों के पूरक के रूप में, एसवीजी के मैट्रिक्स के सिरदर्द के बिना एफएफ पर आधे रास्ते में छवि को असंतृप्त करना संभव है :

<feColorMatrix type="saturate" values="$v" />

कहाँ $vके बीच है 0और 1। इसके बराबर है filter:grayscale(50%);।

लाइव उदाहरण:

कोड स्निपेट दिखाएं

.desaturate {
    filter: url("#desaturate");
    -webkit-filter: grayscale(50%);
}
figcaption{
    background: rgba(55, 55, 136, 1);
    padding: 4px 98px 0 18px;
    color: white;
    display: inline-block;
    border-top-left-radius: 8px;
    border-top-right-radius: 100%;
    font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
  	<feColorMatrix type="saturate" values="0.4"/>
  </filter>
</svg>

<figure>
  <figcaption>Original</figcaption>
  <img src="http://www.placecage.com/c/500/200"/>
  </figure>
<figure>
  <figcaption>Half grayed</figcaption>
  <img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

स्निपेट का विस्तार करें

एमडीएन पर संदर्भ

— Bigood
स्रोत

1

रोबर्ट के जवाब के आधार पर :

इस तरह मैट्रिक्स का उपयोग करने के बजाय रंगीन छवि से ग्रेस्केल छवि में उचित रूपांतरण प्राप्त करने के लिए :

0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0      0      0      1 0

आपको इस तरह रूपांतरण मैट्रिक्स का उपयोग करना चाहिए:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

यह RGBA (लाल-हरा-नीला-अल्फा) मॉडल पर आधारित सभी प्रकार की छवियों के लिए ठीक काम करना चाहिए।

अधिक जानकारी के लिए आपको मैट्रिक्स का उपयोग क्यों करना चाहिए मैंने अधिक संभावना पोस्ट की है कि रॉबर्ट के एक लिंक के बाद चेक की जांच करें:

— Kajiyama
स्रोत

मैं मानता हूं कि 0.3333 गलत है; 0.2126 0.7152 0.0722 0 0समतुल्य प्रतीत होता है<fecolormatrix type="saturate" values="0">

— नील

"और यहां आप कुछ सी # और वीबी कोड पा सकते हैं" का लिंक यहां इंटरनेट संग्रह पर पाया जा सकता है: web.archive.org/web/20110220101001/http://www.bobpowell.net/…-

— ittek

"द ल्यूमिनेन्स एंड कलर डिफरेंस सिग्नल्स" का लिंक भी टूटा हुआ है। मुझे कोई प्रतिस्थापन नहीं मिला।

— 19ge में यह

0

एक भयानक लेकिन व्यावहारिक समाधान: एक फ्लैश ऑब्जेक्ट का उपयोग करके छवि को प्रस्तुत करना, जो तब आपको फ्लैश में सभी परिवर्तनों को संभव बनाता है।

यदि आपके उपयोगकर्ता ब्लीडिंग-एज ब्राउज़रों का उपयोग कर रहे हैं और यदि फ़ायरफ़ॉक्स 3.5 और सफ़ारी 4 इसका समर्थन करते हैं (मुझे नहीं पता कि या तो करते हैं / करेंगे), तो आप छवि के सीएसएस रंग-प्रोफाइल विशेषता को समायोजित कर सकते हैं , इसे एक ग्रेस्केल ICC पर सेट कर सकते हैं। प्रोफाइल यूआरएल। लेकिन अगर बहुत है!

— richardtallent
स्रोत

0

हो पुराने ब्राउज़र के लिए एक वैकल्पिक उपयोग मुखौटा छद्म तत्वों या इनलाइन टैग द्वारा उत्पादित करने के लिए हो सकता है।

पूर्ण स्थिति निर्धारण में एक img हो सकता है (या पाठ क्षेत्र को न तो क्लिक की जरूरत है और न ही चयन की आवश्यकता है) बारीकी से रंग पैमाने के प्रभाव की नकल कर सकते हैं, आरजीबीए () या ट्रांसलूसिड पीएनजी के माध्यम से ।

यह एक एकल रंग स्केल नहीं देगा, लेकिन रंगों को सीमा से बाहर कर देगा।

छद्म तत्व के माध्यम से 10 अलग-अलग रंगों के साथ कोड पेन पर परीक्षण, अंतिम ग्रे है। http://codepen.io/gcyrillus/pen/nqpDd (दूसरी छवि पर स्विच करने के लिए पुनः लोड)

— जी Cyrillus
स्रोत

0

आप jFunc के कार्यों में से एक का उपयोग कर सकते हैं - फ़ंक्शन का उपयोग करें "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

— दानी मौर
स्रोत

0

इस jquery प्लगइन का प्रयास करें। हालाँकि, यह शुद्ध HTML और CSS समाधान नहीं है, लेकिन यह जो आप चाहते हैं उसे प्राप्त करने का एक आलसी तरीका है। आप अपने उपयोग को सर्वश्रेष्ठ करने के लिए अपने greyscale को अनुकूलित कर सकते हैं। इसे निम्नानुसार उपयोग करें:

$("#myImageID").tancolor();

एक इंटरैक्टिव डेमो है । आप इसके साथ खेल सकते हैं।

उपयोग पर प्रलेखन की जाँच करें, यह बहुत आसान है। डॉक्स

— निकोलस टीजे
स्रोत

0

फ़ायरफ़ॉक्स में एक प्रतिशत के रूप में ग्रेस्केल के लिए, इसके बजाय संतृप्त फ़िल्टर का उपयोग करें: ('संतृप्त' के लिए खोज)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"

— dval
स्रोत

-1

यदि आप, या भविष्य में इसी तरह की समस्या का सामना कर रहे व्यक्ति PHP के लिए खुले हैं। (मुझे पता है कि आपने HTML / CSS कहा है, लेकिन शायद आप पहले से ही बैकएंड में PHP का उपयोग कर रहे हैं) यहाँ एक PHP समाधान है:

मैंने इसे PHP GD लाइब्रेरी से प्राप्त किया और इस प्रक्रिया को स्वचालित करने के लिए कुछ चर जोड़ा ...

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

— Trufa
स्रोत

4

@Tom, मूल प्रश्न पर वोटों और पसंदीदा के आधार पर, ओपी एकमात्र व्यक्ति नहीं है जिसने सोचा कि क्या यह संभव है। निश्चित रूप से, यह उत्तर नियमों को झुका सकता है, लेकिन मुझे उस उत्तर को अस्वीकार करने की बात नहीं दिखती जो बहुत से लोगों के लिए उपयोगी हो सकता है।

— माइकल मार्टिन-स्मकर

1

@ हालांकि, मुझे हालांकि यह सवाल का सटीक जवाब नहीं हो सकता है, यह काम में आ सकता है क्योंकि यह वास्तव में जावास्क्रिप्ट की "परेशानी" के बिना ग्रेस्केल की समस्या को हल करता है, शायद वह पीएचपी के बारे में भी विचार या विचार नहीं करता है। जीडी, कोई नुकसान का इरादा नहीं है। @ mlms13 वह बिंदु था, धन्यवाद :)

— Trufa

इसके बारे में मेरा बुरा, "विचार" है कि अन्य उपयोगकर्ता इस पोस्ट से लाभ उठा सकते हैं जो मेरे दिमाग से फिसल गए हैं .. क्षमा करें @Trufa

— झटका

3

इसने मेरी मदद की, कुछ अन्य मृत समाप्त होने के बाद मुझे सही रास्ते पर डाल दिया। मैंने पाया कि "इमेजफिल्टर ($ स्रोत, IMG_FILTER_GRAYSCALE) का उपयोग करके;" हालांकि एक बेहतर परिणाम दिया। (PHP 5 केवल)

— chrismacp

5

वस्तुतः यह विषय से दूर है, क्योंकि नीचे वोट दिया गया। सर्वर साइड पर एक इमेज को ग्रेस्केल करना सीएसएस / एचटीएमएल से पूरी तरह से अलग है।

— साइमन स्टाइनबर्गर