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

Posted 2023-03-06

【中文标题】在纯色背景上添加透明渐变

【英文标题】：Add a transparent gradient over a solid background

【发布时间】：2013-03-22 23:16:16

【问题描述】：

我正在寻找一种创建模块化渐变的方法，该渐变可以通过将其添加为 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，在彩色背景上显示透明渐变。

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

【问题讨论】：

只是好奇，为什么不从黑色渐变到红色，而不是在红色背景下从黑色渐变到透明？

@Kev，因为我正在尝试制作一个可以应用于很多东西的模块化渐变混合。不仅仅是按钮

【参考方案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

【讨论】：

@MattLambert 如果这是你要找的，你能把它标记为接受的答案吗？

【参考方案2】：

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

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

基本上是将颜色分配给 div 而不是主体

【讨论】：

看上面的例子，这就是我要找的，谢谢