Question

我正在寻找一种方法来创建一个模块化渐变，可以通过将其添加为LESS mixin来应用于任意数量的项目。

例如，假设您有一个平坦的红色按钮，您也想要应用渐变。我想在平坦的红色按钮背景上覆盖黑色渐变（顶部是透明的），而不是选择基本的红色和深红色渐变渐变。虽然它只有一种颜色（黑色），但褪色会导致幻觉从黑色渐变到红色。理论上，您可以通过一种方式将相同的梯度混合叠加在多个项目上。而不是必须定义大量不同的梯度值。

以下是纯css中的示例代码，我认为它应该如何工作但不会：

.btn {
 background: red;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)), color-stop(1,black));

}

此代码将导致加载渐变（黑色）。除非将红色设置为背景div或正文颜色，否则红色不会显示。我想把它附加到同一个班级。这是LESS版本：

.gradient (@startColor: fade(@black, 0%), @endColor: fade(@black, 50%)) {
 background-color: @black;
 background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor), color-stop(1,#000000));

}

我能够达到我想要做的最接近的是将背景颜色设置为红色，然后将半透明渐变设置为红色。但是，我想在内联按钮等上设置目标颜色......这是一个fiddle，显示彩色背景上的透明渐变。

是否可以将颜色值附加到实际项目（按钮）的背景？顶部的梯度加载？

Answer 1

在您提供的代码中，第二个background声明完全取代了第一个{1}}声明，因为您使用了简写background属性，而不是仅将background-image设置为渐变。您可以将第一个background-color和第二个background-image合并为一个background声明：

.btn {
    background: red -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

JSFiddle

Answer 2

这是你在想http://jsfiddle.net/kevinPHPkevin/G55ya/1/

<div>
    <a class="btn">button</a>
</div>

它基本上将颜色分配给div而不是身体

在纯色背景上添加透明渐变

2 个答案: