Làm thế nào để thay đổi màu sắc của png trên di chuột?

Question

Tôi đã tạo "mũi tên xuống" trong trình minh họa và lưu nó dưới dạng png có nền trong suốt. Khi tôi đặt nó vào trang web của tôi như là một img, nó xuất hiện trong màu gốc, đó là okay. Tôi đang cố gắng để làm

img:hover{color:red;} 

và nó không hoạt động.

Có ai biết cách làm cho nó hoạt động không?

Cảm ơn

Answer 1

Nếu bạn nhắm mục tiêu các trình duyệt hiện đại, bạn có thể sử dụng CSS filters.

Bộ lọc hue-rotate là thích hợp cho việc thay đổi màu sắc:

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

Số tiền chính xác của độ phụ thuộc vào hình ảnh của bạn và kết quả mong đợi.

Lưu ý rằng bộ lọc CSS là một tính năng mới và browser support is limited.

---

Ngoài ra, bạn có thể sử dụng kỹ thuật CSS sprites, hoạt động trong mọi trình duyệt có độ tuổi hợp lý.

Answer 2

Áp dụng:

{color:red} 

đến bất kỳ yếu tố có nghĩa là thay đổi màu chữ.

Hãy thử thay đổi:

img:hover {color:red} 

tới:

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

và các công trình này nếu bạn chỉ có một hình ảnh. Nếu bạn có nhiều hình ảnh và bạn chỉ muốn một hình ảnh thay đổi khi di chuột, hãy đặt ID cho hình ảnh bạn muốn thay đổi và thay đổi img và img: di chuột sang #x và #x: di chuột và thay thế x bằng tên bạn đã đặt cho ID.

Dưới đây là một ví dụ (giả định khác HTML là nguyên vẹn và được định dạng đúng):

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

Answer 3

Những gì bạn cần làm là thiết lập hình ảnh làm background-image sử dụng CSS. Sau đó thiết lập trạng thái di chuột bằng cách sử dụng một phiên bản khác của hình ảnh (có màu khác). Ví dụ:

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

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

Tùy thuộc vào nơi bạn đặt hình ảnh/lớp, bạn sẽ cần chỉ định chiều cao/chiều rộng thích hợp (hoặc sử dụng đệm).

Answer 4

Bạn có thể thay đổi màu của hình ảnh bằng một hình ảnh giống hệt màu khác với sự kiện (như di chuột).

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

Cụ thể ở đây: http://css3.bradshawenterprises.com/cfimg/