सीएसएस का उपयोग कर div की पृष्ठभूमि छवि को कैसे असंतृप्त करना है?

Question

मैंने टैग में छवि को विलुप्त करने के लिए इतने सारे प्लगइन देखा।

लेकिन मैं नहीं पृष्ठभूमि छवि desaturate के लिए किसी भी बात है, एक छवि है, जिसके लिए एक पृष्ठभूमि के रूप में प्रयोग किया जाता है पता चला (एक तत्व (div)।

वहाँ के साथ हॉवर पर पृष्ठभूमि छवि desaturate करने के लिए एक रास्ता है 2 पृष्ठभूमि का उपयोग कर (Ie छवि स्प्राइट एक बी & डब्ल्यू और अन्य रंग है)

मैं इस का उपयोग कर छवि sprites की तरह कुछ कर सकते हैं।

// Initially color Image  
$(<element>).mouseover(function(e){ 

        jQuery(this).children(":first").stop().animate(
        { 
         'background-position': <some coordinates> 
         // Coordinates of b&w Image 
        }, 
        100      
        ); 

        e.stopPropagation(); 
       }) 
       .mouseout(function(e){ 

        jQuery(this).children(":first").stop().animate(
        { 
         'background-position': <some coordinates> 
          // Coordinates of color Image 
        }, 
        100, 
        settings.easingType 
        ); 

        e.stopPropagation(); 
       }); 

लेकिन मैं इस चाहते। मैं चाहता हूँ घ फ्लाई पर असंतृप्त पृष्ठभूमि छवि। कृपया मदद करें।

Answer 1

element: hover{ 
    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"); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter:  grayscale(100%); 
    -o-filter:  grayscale(100%); 
    filter: gray; 
} 

यहां संबंधित प्रश्न है कि किसी को पुनर्निर्देशन की आवश्यकता है।

CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated

Answer 2

इस पृष्ठ पर एक नज़र डालें http://davidwalsh.name/css-filters। यह कुछ फ़िल्टर विधियों (वेबकिट ब्राउज़र) बताता है।

शायद आपको इसे कैनवास (बेहतर ब्राउज़र समर्थन) या सर्वर पर सबसे अच्छा करना चाहिए, उदाहरण के लिए php के साथ।