透明到颜色渐变CSS问题

Question

我使用这个 CSS:

创建了一个从透明到白色的渐变

linear-gradient(to right, transparent, white)

另见：http://jsfiddle.net/fs8gpha2/

这在 Chrome 中一切正常，但在 Safari 和 Firefox 中，渐变的中心是灰色的。有什么办法可以解决这个问题吗？

谢谢！

Answer 1

像这样尝试：

body {
    background: #000;
}

div {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    width: 100%;
    height: 100px;
}

这是Demo

Answer 2

这将是一个跨浏览器的解决方案（我更新了 jsfiddle）：

http://jsfiddle.net/fs8gpha2/4/

div { 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background-color: rgba(255, 255, 255, 0); width:100%; height:100px; }

干杯

透明到颜色渐变CSS问题

Transparent to color gradient CSS issue

css

linear-gradients