CSS-线性渐变在background属性中不起作用

时间:2018-09-09 16:39:28

标签: javascript html css vuejs2

我正在尝试使用vue-orgchartlink)创建树

它工作正常,但是我想更改节点的绿色背景(忽略白色部分)。

enter image description here

css可以在下面的link中找到。

我发现绿色是:#42b983。因此很容易在css文件中找到它:

.orgchart .node .title {
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #42b983;
  color: #fff;
  border-radius: 4px 4px 0 0;
}

然后进行更改:

background-color: linear-gradient(#66cccc, #3399cc);

但是,由于某种原因,我得到了:

enter image description here

如果我尝试使用任何其他颜色(不使用linear-gradient)都会成功。

此外,我在网络的其他部分使用了这种样式(linear-gradient),而且效果很好,因此浏览器也不成问题(如果重要,我会使用chrome)。

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

请在代码下方

background-image: linear-gradient(#66cccc, #3399cc);