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

我正在寻找一种方法来创建可应用于任意数量的项目的模块化渐变，方法是将其添加为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，它显示了彩色背景上的透明渐变。

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

来源

2013-04-01 Matt Lambert

只是好奇，你为什么不从黑色变成红色，而不是黑色渐变透明带红色背景？ – Vector

@Kev，因为我试图做一个模块化渐变mixin，我可以应用于很多东西。不只是按钮 –

在您所提供的代码，第二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

来源

2013-04-01 20:25:08 nathan

这正是我正在寻找，谢谢 –

这是一个很好的解决方案！ – Vector

@MattLambert如果这是你正在寻找的东西，你能把它标记为接受的答案吗？ – nathan

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

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

它基本上指定的颜色，一个div不是身体

来源

2013-04-01 20:11:10 Vector

看到上面的例子，这就是我正在寻找，虽然 –

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

回答

相关问题