jak desaturate obraz tła div za pomocą css?

Question

Widziałem tak wiele wtyczek, aby zdeszyć obraz z tagiem .

Ale nie mogę znaleźć niczego do desaturate Obraz tła (obraz, który służy jako tło dla elementu (div).

Czy istnieje sposób, aby zmniejszyć nasycenie obrazu tła przy aktywowaniu z obecnie Używanie 2 Tła (tj sprite'ów nich jest b & W, a drugi jest kolorowa)

mogę zrobić coś takiego z wykorzystaniem sprite'ów.

// 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(); 
       }); 

Ale nie chcę tego. Chcę d esaturate Obraz tła w locie. Proszę o pomoc.

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

Oto powiązane pytanie z nadzieją, że ktoś potrzebuje przekierowania.

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

Answer 2

Spójrz na tę stronę http://davidwalsh.name/css-filters. Wyjaśnia niektóre metody filtrowania (przeglądarki internetowe).

Może powinieneś zrobić to lepiej dzięki płótnie (lepsza obsługa przeglądarki) lub najlepiej na samym serwerze, na przykład za pomocą php.