CSS3白色到透明的漸變

我使用CSS3和RGBA創建一個白色到透明的漸變：CSS3白色到透明的漸變

div { 
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1); 
    padding: 2rem 0; 
}

小提琴這裏：http://jsfiddle.net/alecrust/fYz45/

但是你會發現，梯度在中間黑暗。我得到這個：

Getting

而且我很期待這樣的：

Expecting

我怎樣才能解決？

來源

2013-03-26 AlecRust

改變你的最後一步#FFFFFF00（rgba(255, 255, 255, 0)），而不是#00000000：

http://jsfiddle.net/fYz45/6/

來源

2013-03-26 21:03:10 MarcinJuraszek

啊，但當然。謝謝！ – AlecRust 2013-03-26 21:06:03

最終的顏色應該是白色的，透明的，而不是黑色透明

，而不是

rgba(0, 0, 0, 0)

結束於

rgba (255, 255, 255, 0)

來源

2013-03-26 21:04:59 vals

div{ 
    background-color:#ffffff; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff,  endColorstr=#ffff01); 
    background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%); 
    background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff),  color-stop(100%,#ffff01)); 
}

來源

2013-03-26 21:11:52 Ani

如果任何人如果具有梯度麻煩或讓某一方面（角度，透明度等），我建議嘗試這個工具來了解更多信息：http://www.colorzilla.com/gradient-editor/下面的代碼是樣本所能，做。透明度由頂部正方形控制，降低顏色。它可以讓你不斷減少更多的顏色。它有很好的向後可比性，也有一些預置。

`div { 
 
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1); /* IE6-9 */ 
 
background-repeat: repeat-x; 
 
padding: 2rem 0; 
 
}`

來源

2016-04-29 14:14:55 Tom

CSS3白色到透明的漸變

回答

相關問題