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

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));

}

我最接近我想要做的是将背景颜色设置为红色，然后在其上放置半透明渐变。但是，我希望在内嵌按钮上有目标颜色，等等......这是一个在彩色背景上显示透明渐变的小提琴。

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

Answer 1

在您提供的代码中，第二个background声明完全替换了第一个声明，因为您使用了速记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