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问题

2 个答案: