Fatal编程技术网
  • html/
  • Html 如何显示Illustrator生成的CSS渐变？

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

html css

Html 如何显示Illustrator生成的CSS渐变？,html,css,gradient,adobe-illustrator,Html,Css,Gradient,Adobe Illustrator,作为设计师，我可以从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,

作为设计师，我可以从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>


测验
/*css代码在这里*/
我错过了什么

这是一个渐变矩形，应该如下所示：

<!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>

您需要设置元素的宽度和高度，并在CSS中应用渐变：

.test{
背景：莫兹线性梯度（0%50%0deg，rgba（41150204,1）0%，rgba（451301891）8.39%，rgba（53891581）28.7%，rgba（5956134,1）48.5%，rgba（63326116,1）67.39%，rgba（6618106,1）84.98%，rgba（6713102,1）100%）；
背景：webkit线性梯度（0度，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%）；
背景：-webkit渐变（线性，0%50%，100%50%，颜色停止（0，rgba（41，150，204，1）），颜色停止（0.0839，rgba（45，130，189，1）），颜色停止（0.287，rgba（53，89，158，1）），颜色停止（0.485，rgba（59，56，134，1）），颜色停止（0.6739，rgba（63，32，116，1）），颜色停止（0.8498，rgba（66，18，106，1）），颜色停止（1，rgba（67，13，102，1））；
背景：-o-线性梯度（0度，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线性梯度（0度，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过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr='#2996CC'，endColorstr='#430D66'，GradientType=0）”；
背景：线性梯度（90度，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%）；
位置：绝对位置；
左：100px；
顶部：50px；
宽度：300px；
高度：150像素；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2996CC'，endColorstr='#430D66'，GradientType=1）；
}
您需要使用CSS中应用的渐变设置元素的宽度和高度：

.test{
背景：莫兹线性梯度（0%50%0deg，rgba（41150204,1）0%，rgba（451301891）8.39%，rgba（53891581）28.7%，rgba（5956134,1）48.5%，rgba（63326116,1）67.39%，rgba（6618106,1）84.98%，rgba（6713102,1）100%）；
背景：webkit线性梯度（0度，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%）；
背景：-webkit渐变（线性，0%50%，100%50%，颜色停止（0，rgba（41，150，204，1）），颜色停止（0.0839，rgba（45，130，189，1）），颜色停止（0.287，rgba（53，89，158，1）），颜色停止（0.485，rgba（59，56，134，1）），颜色停止（0.6739，rgba（63，32，116，1）），颜色停止（0.8498，rgba（66，18，106，1）），颜色停止（1，rgba（67，13，102，1））；
背景：-o-线性梯度（0度，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线性梯度（0度，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过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr='#2996CC'，endColorstr='#430D66'，GradientType=0）”；
背景：线性梯度（90度，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%）；
位置：绝对位置；
左：100px；
顶部：50px；
宽度：300px；
高度：150像素；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2996CC'，endColorstr='#430D66'，GradientType=1）；
}
您忘记设置
宽度和
高度。。检查下面更新的代码段



.test
{
背景：莫兹线性梯度（0%50%0deg，rgba（41150204,1）0%，rgba（451301891）8.39%，rgba（53891581）28.7%，rgba（5956134,1）48.5%，rgba（63326116,1）67.39%，rgba（6618106,1）84.98%，rgba（6713102,1）100%）；
背景：webkit线性梯度（0度，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%）；
背景：-webkit渐变（线性，0%50%，100%50%，颜色停止（0，rgba（41，150，204，1）），颜色停止（0.0839，rgba（45，130，189，1）），颜色停止（0.287，rgba（53，89，158，1）），颜色停止（0.485，rgba（59，56，134，1）），颜色停止（0.6739，rgba（63，32，116，1）），颜色停止（0.8498，rgba（66，18，106，1）），颜色停止（1，rgba（67，13，102，1））；
背景：-o-线性梯度（0度，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线性梯度（0度，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过滤器：“progid:DXImageTransform.Microsoft.gradient（startColorstr='#2996CC'，endColorstr='#430D66'，GradientTyp”