CSS और फिर से माउस पर रंग के साथ छवि Greyscale?

Question

मैं एक आइकन देख रहा हूं जो रंगीन है (और एक लिंक होगा) और इसे greyscale चालू करें जब तक कि उपयोगकर्ता अपने माउस को आइकन पर नहीं रखता (जहां यह तब छवि को रंग देगा)।

क्या ऐसा करना संभव है, और इस तरह से IE और Firefox समर्थित है?

Comments

लगभग डुप्लिकेट ... stackoverflow.com/q/609273/670377

— टॉम सरदयू

यदि आप इसे अन्य तरीके से करते हैं तो यह अधिक दिलचस्प प्रभाव नहीं होगा? माउस कर्सर को जादू की छड़ी की तरह होने दें जो एक अंधेरी दुनिया में रंग लाता है?

— X10D

Answer 1

इसे पूरा करने के कई तरीके हैं, जिन्हें मैं नीचे कुछ उदाहरणों के साथ विस्तार करूंगा।

शुद्ध CSS (केवल एक रंगीन छवि का उपयोग करके)

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 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

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

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 3.5+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

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

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

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}

<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<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>

आप इस तकनीक से संबंधित एक लेख यहां पा सकते हैं ।

शुद्ध CSS (ग्रेस्केल और रंगीन चित्रों का उपयोग करके)

इस दृष्टिकोण को एक छवि की दो प्रतियों की आवश्यकता होती है: एक ग्रेस्केल में और दूसरा पूर्ण रंग में। CSS :hoverpsuedoselector का उपयोग करके , आप दोनों के बीच टॉगल करने के लिए अपने तत्व की पृष्ठभूमि को अपडेट कर सकते हैं:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

#google {
  background: url('http://www.google.com/logos/keystroke10-hp.png');
  height: 95px;
  width: 275px;
  display: block;
  /* Optional for a gradual animation effect */
  transition: 0.5s;
}

#google:hover {
  background: url('https://graphics217b.files.wordpress.com/2011/02/logo1w.png');
}

<a id='google' href='http://www.google.com'></a>

यह जावास्क्रिप्ट-आधारित हॉवर प्रभाव का उपयोग करके भी पूरा किया जा सकता है जैसे कि jQuery के hover()फ़ंक्शन को उसी तरीके से।

थर्ड-पार्टी लाइब्रेरी पर विचार करें

Desaturate पुस्तकालय एक आम पुस्तकालय आप आसानी से एक ग्रेस्केल संस्करण और किसी दिए गए तत्व या छवि का पूरा रंग संस्करण के बीच स्विच करने की अनुमति देता है।

Comments

अगर कहा जाता है कि छवियों को अन्य वेबसाइट के साथ जोड़ा जाना चाहिए, अगर छवियों को पृष्ठभूमि के रूप में सेट किया जाता है तो यह कैसे किया जा सकता है?

— मेटा

यह उसी तरह से काम करेगा, धारा 1 के तहत डेमो की जाँच करें। यदि आपके कोई अन्य प्रश्न हैं तो मुझे मदद करने में खुशी होगी।

— रियोन विलियम्स

दोस्तों, क्या किसी ने देखा कि यह सफारी में काम नहीं कर रहा है? मैंने अभी इस मुद्दे को जांचा और पाया है, क्या इसे हल करने का कोई तरीका है?

— गजेन

Answer 2

यहां उत्तर दिया गया: HTML / CSS में एक छवि को ग्रेस्केल में बदलें

आपको दो छवियों का उपयोग करने की आवश्यकता नहीं है जो एक दर्द या एक छवि हेरफेर लाइब्रेरी की तरह लगती है, आप इसे क्रॉस ब्राउज़र समर्थन (वर्तमान संस्करण) के साथ कर सकते हैं और बस CSS का उपयोग कर सकते हैं। यह एक प्रगतिशील संवर्द्धन दृष्टिकोण है जो अभी पुराने ब्राउज़र पर रंग संस्करणों में वापस आता है:

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

और filter.svg फ़ाइल को इस तरह:

<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>

Answer 3

मैं http://www.diagnomics.com/ पर निम्न कोड का उपयोग करता हूं

आवर्धक प्रभाव (स्केल) के साथ बी / डब्ल्यू से रंग में चिकना संक्रमण

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }

Comments

वेबकिट ब्राउज़र में बढ़िया काम करता है! फ़ायरफ़ॉक्स ब्राउज़र में आपका कोड मेरे लिए काम नहीं करता है, लेकिन फिर, मुझे लगता है कि यह एक SVG फ़ाइल के साथ कुछ करना है और मैं इस fiddle jsfiddle.net/coolwebs/num04rya/10 में एक बिटमैप का उपयोग कर रहा हूं, हालांकि कुछ अजीब है - संक्रमण सफारी में प्रभाव रोलओवर पर छवि को 'झटका' देता है ....

— रयान कूलवेब्स

Answer 4

आप एक स्प्राइट का उपयोग कर सकते हैं जिसमें दोनों संस्करण हैं - रंगीन और मोनोक्रोम-इसमें संग्रहीत।

Answer 5

यहाँ एक डेमो है। IE7 में भी काम करता है:

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

तथा

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/