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

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 或主体颜色，否则红色不会显示出来。我想把它附加到同一个类(class)。这是 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 声明完全取代了第一个，因为您使用了简写 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