2014-11-01 68 views
2

我創建了我的新投資組合,並且我在CSS中有漸變的奇怪問題。我使用CSS梯度發生器梯度透明紫羅蘭紫羅蘭。當然還有多條線路對舊版瀏覽器太在我的代碼,但W3C線看起來像這樣:對火狐顏色漸變的奇怪透明

background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(42,28,80,0.29) 29%,rgba(42,28,80,1) 100%); 

而且我得到的Firefox很奇怪的行爲。 http://i.stack.imgur.com/8cN1M.jpg

帶出錯誤,該代碼:

background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(42,28,80,1) 29%,rgba(42,28,80,1) 100%); 

http://i.stack.imgur.com/Utrgr.jpg

它看起來像梯度不知道該怎麼辦RGBA(255,255,255,0)之間的過渡到紫色當它下面有圖像時。我將背景中的圖像改爲普通顏色,漸變效果很好。可以修復嗎?

回答

2

這是由bug 591600

從Firefox 36固定在Firefox 36開始梯度將使用預乘顏色的,這將使轉型爲/從透明的工作,你期望它的方式。

3

我設法修復也是它的版本低於火狐36

的Firefox有問題,產生白色透明與顏色好看的轉變,解決它的最簡單的方法是改變第一α0顏色爲相同的顏色,如α-1,所以這樣的:

background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(42,28,80,1) 100%); 

應當改變成:

background: linear-gradient(to right, rgba(42,28,80,0) 0%, rgba(42,28,80,1) 100%);