为列表应用平滑的渐变颜色

Question

我想在悬停时以及链接处于活动状态时为菜单中的项目应用渐变颜色：

    <li class="nav-find-item active">
      <a class="nav-find-link " href="#!dashboard">
        <i class="fa fa-tachometer menu-icon"></i> 
        <span class="menu-title"> Dashboard</span>
      </a>
    </li>

这是我的CSS样式：

.sidebar-find .nav-find .nav-find-item.active {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

.sidebar-find .nav-find .nav-find-item:hover {
  background-image: linear-gradient(to right, #FFB88C, #191F28 10%);
}

这里是fiddle

但是它并没有给我想要的结果。我想要的是：

我得到的是：

我不需要图标，只需颜色。

Answer 1

尝试一下：

background: -moz-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,184,140,0.38)), color-stop(100%, rgba(25,31,40,0)));
background: -webkit-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -o-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: -ms-linear-gradient(left, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);
background: linear-gradient(to right, rgba(255,184,140,0.38) 0%, rgba(25,31,40,0) 100%);

或使用设置here

Answer 2

您还可以在第一个值上添加一个值，然后反复操作直到获得所需的效果，对我来说，这样的事情就可以了：

background-image: linear-gradient(to right, #FFB88C -30%, #191F28 10%);