Jak zmienić kolor png na zawisie?

Question

Zrobiłem "strzałkę w dół" w programie Illustrator i zapisałem ją jako png z przezroczystym tłem. Kiedy umieściłem go na mojej stronie internetowej jako obraz, pokazuje się w oryginalnym kolorze, co jest w porządku. Próbuję wykonać:

img:hover{color:red;} 

i to nie działa.

Czy ktoś wie jak to zrobić?

Dzięki

Answer 1

Jeśli kierujesz nowoczesnych przeglądarek, można użyć CSS filters.

Filtr hue-rotate nadaje się do zmieniających się kolorach:

filter: hue-rotate(180deg); 
-webkit-filter: hue-rotate(180deg); 

Dokładna ilość stopni zależy od obrazu i oczekiwanych rezultatów.

Należy zauważyć, że filtry CSS to nowa funkcja, a jej browser support is limited.

---

Można również zastosować technikę CSS sprites, która działa we wszystkich przeglądarkach w rozsądnym wieku.

Answer 2

Nanoszenie:

{color:red} 

do dowolnego elementu oznacza zmianę koloru tekstu.

Spróbuj zmienia:

img:hover {color:red} 

do:

img:hover {background-image: url('<insert url to red arrow here>');} 

i to działa, jeśli masz tylko jedno zdjęcie. Jeśli masz wiele zdjęć i chcesz, aby tylko jeden zmieniał się na zawisie, ustaw identyfikator obrazu, który chcesz zmienić, i zmień img i img: hover na #x i #x: hover i zamień x na nazwę, którą podałeś dowód osobisty.

Oto przykład (zakładając inne HTML jest nienaruszone i prawidłowo sformatowany):

<style type="text/css"> 
#abc:hover {background-image: url('redarrow.png');} 
</style>  
<img ID="abc" src="normalarrow.png"> 

Answer 3

Co trzeba zrobić, to ustawić obraz jako tło wizerunku z wykorzystaniem CSS. Następnie ustaw stan najechania, używając innej wersji obrazu (z innym kolorem). Na przykład:

.element { 
    background-image: url(your-image.png); 
} 

.element:hover { 
    background-image: url(your-image-hover-version.png); 
} 

W zależności od tego, gdzie umieszczasz obraz/klasę, musisz ustawić odpowiednią wysokość/szerokość (lub używając dopełnienia).

Answer 4

Możesz zmienić kolor obrazu z identycznym obrazem innego koloru ze zdarzeniem (takim jak najechanie).

html:

<div id="cf"> 
    <img class="bottom" src="/images/Windows%20Logo.jpg" /> 
    <img class="top" src="/images/Turtle.jpg" /> 
</div> 

css:

#cf { 
     position:relative; 
     height:281px; 
     width:450px; 
     margin:0 auto; 
    } 

    #cf img { 
     position:absolute; 
     left:0; 
     -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
     -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
    } 

    #cf img.top:hover { 
     opacity:0; 
    } 

tu szczegółowo: http://css3.bradshawenterprises.com/cfimg/