从 colorzilla 编辑器生成的渐变线性渐变的 CSS 错误

Question

非常感谢您抽出宝贵时间阅读本文。 这是 colorzilla 渐变生成器为我创建的代码：

background: #aecc9f; 
background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
**background**: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );

在粗体背景文本行旁边，我收到以下错误：

Expected (<filter-function-list> | none) but found 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 )'

我希望有人能帮助像我这样的编程白痴。

Answer 1

线

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aecc9f', endColorstr='#8faa83',GradientType=0 );

不正确，根据filter属性的定义（1，2），可以取如下值：

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() - for applying SVG filters
custom() - "coming soon"

它们都不负责渐变，因此您可以从代码中删除这一行。

另外我不知道**background** 周围的双星号的目的是什么，但是它们会破坏 css 代码，所以你可能也应该删除它们，它会是这样的：

.gradient {
  background: #aecc9f;
  background: -moz-linear-gradient(top, #aecc9f 0%, #97b78d 50%, #9bb78d 52%, #8faa83 100%);
  background: -webkit-linear-gradient(top, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
  background: linear-gradient(to bottom, #aecc9f 0%,#97b78d 50%,#9bb78d 52%,#8faa83 100%);
}

.wide {
  width: 100%;
  height: 100px;
}

<div class="wide gradient">
</div>