少-按钮梯度随着米辛打破哈弗风格

Question

我移动了一些渐变按钮样式到一个混合器，现在悬停样式是不正确的。悬停状态应应用背景偏移量和顶部的梯度，但当将其用作混合体时，则以相反的顺序应用，即偏移量被施加在梯度的顶部，使按钮看起来像是两种不同的实心颜色。使用混合器应用这些样式的正确方法是什么？

样式

.btn-primary {
  background-color: hsl(98, 35%, 73%) !important;
  color: #333 !important;
  .btn-gradient(#ebf3e6, #b3d2a2);
}

米辛

.btn-gradient(@startColor, @endColor) {
  border-color: @endColor @endColor hsl(98, 35%, 68%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor);
  background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background-image: -moz-linear-gradient(top, @startColor, @endColor);
  background-image: -ms-linear-gradient(top, @startColor, @endColor);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor));
  background-image: -webkit-linear-gradient(top, @startColor, @endColor);
  background-image: -o-linear-gradient(top, @startColor, @endColor);
  background-image: linear-gradient(@startColor, @endColor);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
  -webkit-font-smoothing: antialiased;
  &:hover {
    background-position: 0 -15px;
  }
}

密辛悬停

​

​

无混频悬停

​

​

Answer 1

原来我错过了背景-重复:重复-x；从混音。