Zastosuj filtr obracania CSS odcień do szarości

Staram się wypracować jak zmienić odcienia szarości za pomocą CSS ...Zastosuj filtr obracania CSS odcień do szarości

Mam dwa obrazy (jeden kolor i jeden skala szarości) i mają zastosowano ten kod do obu:

CSS

img { width: 10pc; float: left; } 
.huerotate { -webkit-filter: hue-rotate(300deg); }

HTML:

<img alt="Test photo: Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" class="huerotate" /> 

<img alt="Test photo: Hand" src="http://i821.photobucket.com/albums/zz137/ocnsamu/Capture-2.jpg" class="huerotate" />

To skutecznie zmienia obraz kolorowy, ale obraz w skali szarości pozostaje niezmieniony.

Czy istnieje sposób na zmianę odcienia obrazów w skali szarości, korzystając z innej technologii CSS?

Demo jest tutaj: http://jsfiddle.net/ATpv8/

Wiele z góry dzięki za pomoc ...

Źródło

2014-05-07 user2761030

AFAIK, nie można zrobić odcień obracać na szaro ... to pozostaje ona ma szary kolor „” jako takie być 'rotated'. Możesz spróbować najpierw zastosować filtr 'sepia', a następnie 'obrócić'. (Http://www.html5rocks.com/en/tutorials/filters/understanding-css/) –

dla szarego, musisz go pokolorować przed –

Dzięki obojgu, dodanie sepii nie ma żadnego znaczenia ... @GCyrillus, jak mógłbym go pomnożyć? Czy można to zrobić w HTML/CSS? – user2761030

Jako obrazów w skali szarości nie zawierają kolor z definicji musi filtr sepia być najpierw dodany do „colourise” zdjęcie w skali szarości.

Stamtąd można zastosować funkcję "hue-rotate", aby uzyskać kolorowy odcień.

.colorme { 
     -webkit-filter: sepia(100%) hue-rotate(300deg); 
}

Demo tutaj: http://jsfiddle.net/ATpv8/2/

Źródło

2014-05-07 14:57:25 user2761030

Serdecznie witamy! –

Nie mogę uwierzyć, że można to zrobić, ale rzeczywiście zrobiłem jasnozielony z przezroczystego białego obrazu z: sepią (100%) z nasyconym odcieniem (64deg) nasyconym (9). Chodzi o sepię. UWAGA: zamówienie ma znaczenie! Najpierw sepia! –

Zastosuj filtr obracania CSS odcień do szarości

Odpowiedz

Powiązane problemy