Question

嗨我正在尝试在元素达到50％的元素时添加一个完整的颜色停止的线性渐变，但似乎没有显示。

我在codepen中创建了一个示例：

这是我用来添加背景图片的代码：

 background-image: linear-gradient(to right, color-stop(50%, #94A14E), color-stop(50%, #C5C5C5));

谁能告诉我我做错了什么？

Answer 1

是的，您的渐变语法错误：请检查MDN

应该是这样的：

background-image: linear-gradient(to right,#94A14E 50%, #C5C5C5 50%);

Answer 2

以下是一个工作代码段，正确的语法为'linear-gradient(to right,#94A14E 50%, #C5C5C5)'

(function() {
  let element = document.querySelector('.ceva');
  
  element.style.backgroundImage = 'linear-gradient(to right,#94A14E 50%, #C5C5C5)'
})()

.ceva
{
  width:300px;
  height:300px;
  
}

<div class="ceva"></div>

线性渐变未显示全色停止

2 个答案: