Illustrator生成的CSS渐变如何显示？

Question

作为一名设计师，我可以从 Illustrator 中提取此 CSS 代码：

.test
    {
      background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
      background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
      background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
      background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      position : absolute ;
      left : 215px;
      top : 151px;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
    }

我在浏览器中这样试过：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>test</title>
    <style type="text/css">
        /* css code here */
    </style>
 </head>
 <body>
    <div class="test" id="test"> </div>
 </body>
</html>

我错过了什么？

它是一个渐变矩形，应该是这样的：

Answer 1

您需要在 CSS:

中设置应用了渐变的元素的宽度和高度

.test {
      background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
      background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
      background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
      background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      position : absolute ;
      left : 100px;
      top : 50px;
      width:300px;
      height: 150px;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}

<div class="test" id="test"> </div>

Answer 2

您忘记设置 width 和 height.. 检查下面更新的代码段..

.test
    {
      background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
      background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
      background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
      background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
     /* position : absolute ;
      left : 215px;
      top : 151px;*/
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
      
      width: 300px;
      height: 200px;
    }

<div class="test"></div>

Illustrator生成的CSS渐变如何显示？

How to display the CSS gradient generated by Illustrator?

html

css

gradient

adobe-illustrator