3

我正在寻找一种创建模块化渐变的方法，该渐变可以通过将其添加为 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));

}

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

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

4

2 回答 2

5

在您提供的代码中，第二个background声明完全替换了第一个声明，因为您使用了速记background属性，而不仅仅是将 设置background-image为渐变。您可以将background-color第一个和background-image第二个中的 the 组合成一个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

于 2013-04-01T20:25:08.213 回答
1

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

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

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

于 2013-04-01T20:11:10.590 回答