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

Question

我希望找到一种方法来创建模块化渐变，可以通过添加为 LESS mixin 应用于任意数量的元素。

例如，假设您有一个红色按钮，想要将渐变应用于它。与其选择基准红色和深红色来淡化渐变效果，我想在红色按钮背景上覆盖黑色渐变（顶部部分透明）。虽然只有一种颜色（黑色），但淡化会产生一种从黑色到红色的错觉。理论上，您可以以这种方式在多个项目中叠加相同的渐变 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或body的颜色，否则红色不会显示出来。我想将其附加到同一个类上。以下是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));

我最接近我想要做的是将背景颜色设为红色，然后在其上方放置半透明渐变。但是，我希望目标颜色恰好在内联按钮等上面。这里有一个演示，显示了透明渐变在有色背景上。

是否可能将颜色值附加到实际项(按钮)的背景上？在顶部加载渐变？

- Matt Lambert

---

只是好奇，为什么你不从黑色渐变到红色，而是从黑色渐变到透明并带有红色背景？ - Kevin Lynch

@Kev，因为我正在尝试创建一个模块化的渐变混合器，可以应用于很多东西，而不仅仅是按钮。 - Matt Lambert

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

- nathan

---

@MattLambert 如果这是您要寻找的内容，您可以将其标记为已接受的答案吗？ - nathan

Answer 2

这是你想要的吗 http://jsfiddle.net/kevinPHPkevin/G55ya/1/

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

基本上是将颜色分配给一个 div 而不是 body。

- Kevin Lynch

---

看上面的例子，那就是我在寻找的，谢谢。 - Matt Lambert