Webkit的過渡不工作的圖像

我已經申請：Webkit的過渡不工作的圖像

-webkit-transition:background-image 0.4s ease-in-out; 
background-image: url('http://www.clementinekeithroach.co.uk/wpcontent/uploads/2013/09/about.jpg'); 
background-position:initial initial; 
background-repeat:initial initial; 
border-bottom-left-radius:0px; 
border-bottom-right-radius:0px; 
border-top-left-radius:0px; 
border-top-right-radius:0px; 
clear:both; 
color:#DDDDDD; 
cursor:pointer; 
display:block; 
font-size:1.8rem; 
height:80px; 
line-height:80px; 
margin:2em auto 0; 
text-align:center; 
transition:background-image 0.4s ease-in-out; 
width:80px; 
}

到「約」形象：

http://www.clementinekeithroach.co.uk/home/

然而，與該網站上的所有其它圖像，其自然褪色，然後在懸停時增加黑暗，這一個拒絕讓步。

有人可以解釋我哪裏出了問題嗎？

來源

2013-09-05 Sam Slater

提供的jsfiddle請 –

以及「關於」圖像與其他人之間之探源是，它是在CSS中的背景圖片添加。其他人playn 元素 –

我可以清楚地看到你的網站上，你不是這樣做。這兩種實現之間存在巨大差異。一個在父鏈接上使用顏色阿爾法過渡，你在背景圖像上使用過渡，而那些在webkit中沒有實現（http://stackoverflow.com/questions/9483364/css3-background-image-transition） –

更換您保存爲背景「約」與此代碼：

記得刪除從跨度的CSS背景圖像屬性。同時刪除跨度中的過濾器和不透明度以完成此項工作。

<span class="sidebar-link"> 
      <img src="http://www.clementinekeithroach.co.uk/wp-content/uploads/2013/09/about.jpg" id="myimg"> 

<style> 
#myimg{ 
    height: 100%; 
    opacity: 0.6; 
    transition: all 0.3s ease-in-out 0s; 
    width: 100%; 
    z-index: 1; 
} 
#myimg:hover{ 
    height: 100%; 
    opacity: 1; 
    transition: all 0.3s ease-in-out 0s; 
    width: 100%; 
    z-index: 1; 
} 
</style> 
</span>

來源

2013-09-05 14:02:15

Webkit的過渡不工作的圖像

回答

相關問題