懸停的背景圖像之間的CSS淡出

Question

有沒有辦法可以做到以下幾點？

我有一個透明的PNG精靈，顯示左側的標準圖片和右側的懸停狀態圖片。

有沒有一種方法可以讓圖像從左側圖像淡入右側圖像：懸停只使用css3轉換？我試過以下，但它不起作用：

li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;} 
li{background:url(/img/sprites.png) 0 -50px no-repeat;} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;} 

現在，上面的動畫背景，它將圖像跨過。我想要的不是平底鍋，而是淡化或溶解效果。

更新：我最終不得不創建兩個元素，並分別爲不透明的動畫製作動畫。這是一個混亂，因爲我必須指定每個元素的確切邊距，但我想它會起作用。感謝大家的幫助:)

Answer 1

li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);} 

應該

li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);} 
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);} 

不知道是否能解決與否雖然。

Answer 2

您尚未指定任何代碼來執行實際轉換。

http://css3.bradshawenterprises.com/cfimg1/

嘗試了這一點在你的懸停風格：

-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 

Answer 3

在此請看：http://jsfiddle.net/j5brM/1/

我覺得這裏很適合您的需求和它有點不太複雜。

Answer 4

我不認爲你可以改變背景圖像在CSS中的不透明度，所以除非你有兩個單獨的背景圖像元素（每個位置的精靈），並改變它們的不透明度徘徊，我想你被卡住了。

Answer 5

關於這一主題的最新消息：

的Chrome 19和更新支持背景圖片的轉換：

演示： http://dabblet.com/gist/1991345

附加信息： http://oli.jp/2010/css-animatable-properties/

Answer 6

我知道這可能遲到一點。但是我很長一段時間都在同一個問題上掙扎。同樣透明的精靈，許多解決方案似乎都不起作用。

我所做的這是什麼

HTML

<div class="sprite-one"> 
    <span class="foo"></span><span class="zen"></span> 
</div> 

CSS

.sprite-one { 
height: 50px 
width: 50px 
} 
.sprite-one span { 
width: 50px; 
height: 50px; 
display: block; 
position: absolute; 
} 
.foo, .zen { 
background-image: url(sprites.png) no-repeat; 
-webkit-transition: opacity .6s ease-in-out; 
-moz-transition: opacity .6s ease-in-out; 
-o-transition: opacity .6s ease-in-out; 
transition: opacity .6s ease-in-out; 
} 
.foo { 
background-position: 0 0; 
opacity: 1; 
} 
.zen { 
background-position: -50px 0; 
opacity: 0; 
} 
.sprite-one:hover .foo { 
opacity: 0; 
} 
.sprite-one:hover .zen { 
opacity: 1; 
} 

這是一個純CSS方式&有一點很多編碼的..但似乎是我達到預期效果的唯一方法！希望那些也絆倒在這的人可以從中找到一些幫助！

Answer 7

<li class="image transition"></li> 

css: 
.image{ 
background-image: url("some/file/path.png"); 
background-repeat: no-repeat; 
width: XXpx; 
height: XXpx; 
background-position: center center; 
background-size: cover; 
} 

/* DRY */ 
.transition{ 
transition: background 0.6s; 
-webkit-transition: background 0.6s; 
} 

.image:hover{ 
background-image: url("some/file/path_hoverImage.png"); 
} 

Answer 8

CSS： -

李{ 背景：網址（http://oakdale.squaresystem.co.uk/images/solutions.png）不重複左邊中心; background-size：89px; padding：54px 0 54px 130px; webkit轉換：全0.5s線性; -moz-transition：全部爲0.5s線性; -o-transition：全部爲0.5s線性; 轉換：全部爲0.5s線性; }

李：懸停{ 背景-SIZE：50px的 }