Question

我为chrome制作了这个css渐变：

background-image: linear-gradient(90deg, rgba(200,0,0,.22) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.26) 50%, transparent 50%);
background-size:50px 50px;

但是我要去香蕉尝试将它移植到webkit，甚至可能是moz。我尝试了很多在线工具，但没有运气。

Answer 1

有一位大师：http://www.colorzilla.com/gradient-editor/

免费

为跨浏览器准备css级联，它看起来像这样：

background: -moz-linear-gradient(top, rgba(200,0,0,0.22) 0%, rgba(41,137,216,0.61) 50%, rgba(32,124,202,0.62) 51%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,0,0,0.22)), color-stop(50%,rgba(41,137,216,0.61)), color-stop(51%,rgba(32,124,202,0.62)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(200,0,0,0.22) 0%,rgba(41,137,216,0.61) 50%,rgba(32,124,202,0.62) 51%,rgba(125,185,232,1) 100%);

你会注意到double -webkit-declaration。

Answer 2

您需要为-webkit-和-moz-渐变指定方向性。这不是假设的。

http://jsfiddle.net/6Yh8R/

div { height: 100px;
    background: -webkit-linear-gradient(left, rgba(200,0,0,.22) 50%, transparent 50%), -webkit-linear-gradient(top, rgba(200,0,0,.26) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgba(200,0,0,.22) 50%, transparent 50%), -moz-linear-gradient(top, rgba(200,0,0,.26) 50%, transparent 50%);
    /*background: linear-gradient(90deg, rgba(200,0,0,.22) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.26) 50%, transparent 50%);*/
    background-size:50px 50px; }

只需取消注释生产的规范版本（只是因为我可以测试浏览器变体的工作原理。）

任何梯度大师都可以将其转换为-webkit？

2 个答案: