Vurguda png rengini nasıl değiştirebilirim?

Question

Illustrator'da bir "aşağı ok" yaptım ve şeffaf bir arka plan ile png olarak kaydettim. Web sayfama bir img olarak koyduğumda, orijinal renkte görünür, bu da tamamdır. Ben

img:hover{color:red;} 

yapmaya çalışıyorum ve çalışmıyor.

Bunu nasıl yapacağını bilen var mı?

Teşekkür

Answer 1

modern tarayıcıları hedefliyorsanız, CSS filters kullanabilir.

hue-rotate filtre değişen renkleri için uygundur:

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

derece kesin miktarı resminizin ve beklenen sonuçlara bağlıdır.

CSS filtrelerinin yeni bir özellik olduğunu ve browser support is limited olduğunu unutmayın.

---

Alternatif olarak, makul çağın tüm tarayıcılarda çalışır CSS sprites tekniği kullanabilir.

Answer 2

uygulanması: Herhangi elemana

{color:red} 

metin rengini değiştirmek demektir.

değişen Dene:

img:hover {color:red} 

için:

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

ve yalnızca bir resim varsa bu çalışır. Çok fazla görüntüünüz varsa ve vurguluda yalnızca bir tane değiştirmek istiyorsanız, değiştirmek istediğiniz görüntü için bir kimlik belirleyin ve img ile img'yi değiştirin: vurgulu #x ve #x: hover'a gidin ve x için verilen adla değiştirin kimlik.

İşte (diğer HTML bozulmamış ve düzgün biçimlendirilmiş varsayıyorum) bir örnek:

CSS kullanarak bir arka plan-görüntüsü olarak ayarlamak yapmanız gereken şey

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

Answer 3

. Ardından, görüntünün başka bir sürümünü (farklı bir renkle) kullanarak bir vurgulu durumu ayarlayın. Örneğin:

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

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

görüntü/sınıf koyarak nereye, uygun yükseklik/genişlik (veya kullanarak dolgu) atamanız gerekir bağlı.

Answer 4

Görüntünün rengini, başka bir rengin özdeş görüntüsüyle bir olayla (üzerinde durarak) değiştirebilirsiniz.

html:

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

css: burada ayrıntılı olarak

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

: http://css3.bradshawenterprises.com/cfimg/