webkit浏览器中渐变的背景图像CSS

Question

我有Mozilla的CSS

background-image: -moz-linear-gradient(center top, 
                                       hsl(0, 0%, 20%), hsl(0, 0%, 13%));

我需要这个CSS来使用WebKit浏览器＆amp; IE也是如此。

Answer 1

我使用 gradient generator 。

示例：

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #BF50D8),
    color-stop(1, #70CDFF)
);
background-image: -o-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Opera
background-image: -moz-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Firefox
background-image: -webkit-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //Safari & Chrome
background-image: -ms-linear-gradient(bottom, #BF50D8 0%, #70CDFF 100%); //IE
background-image: linear-gradient(to bottom, #BF50D8 0%, #70CDFF 100%);

Answer 2

对于Internet Explorer，它应该是

background-image: -ms-linear-gradient

当然是微软的女士。

对于safari：

-webkit-linear-gradient

Answer 3

以下是添加渐变交叉浏览器的方法：

background: -o-linear-gradient();
background: -webkit-gradient(); /* Older webkit syntax */
background: -webkit-linear-gradient();
background: -ms-linear-gradient();

webkit上的示例：

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(), to());