如何在CSS渐变中添加RGBA颜色叠加层？

Question

我想在按钮的 :active 状态下添加一个透明的黑色叠加层，这样当你点击它时，它就会有同样的渐变效果，但只是带有一个例如 rgba(0,0,0,.3) 的叠加层。

我认为这个方法可以实现（以此示例使用 webkit）：

background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

即使没有逗号，顺序颠倒...但是什么都不显示！

我不想添加另一个div作为遮罩层来实现它，那么有没有一种严格使用CSS的方法来实现呢？我想也许可以使用:before或:after伪类，但我不知道如何使用它们！

非常感谢您的回答，这件事已经困扰我很长时间了。

- alexbass

---

:after 是一个伪元素。 - BoltClock

Answer 1

您无法使用rgba定义图片，因为rgba是用来定义颜色的。但是您可以使用一种类似于渐变的方式：

background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

这就是为什么我在开发时总是特别指定background-image，而不是使用简写方式 - 这样可以更容易地进行调试。

- Ry-

Answer 2

你可以使用::after 伪元素来实现。

首先，你需要将按钮的CSS设置为position: relative，然后使用::after和position: absolute，如下所示：

.button {
  position: relative;
}

.button:active::after {
    content: ' ';
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Live Fiddle demo

- Fong-Wan Chau

---

这种技术的一个问题（至少你实现的方式是如此）是，如果文本不是黑色，它也会被淡化 - 请参见修订版演示，而minitech和我只是像OP最初打算的那样操作背景。通过一些有创意的z-index，:after仍然可以正常工作。 - ScottS

@ScottS 你说得对，覆盖层在按钮上方，所以按钮下面的任何东西都会变暗。这是对alexbass提出的问题的回应。 - Fong-Wan Chau

是的，我没有文本变暗或其他问题，这正是我想要的。谢谢Fong-Wan！ - alexbass

::after 是一个伪元素。这就是为什么在 CSS3 中需要用两个冒号作为前缀的原因。 - BoltClock

Answer 3

反向思考

设置 background-color: black 并使用从十六进制转换为 rgba 的颜色叠加渐变（初始 alpha 值设置为 1），然后在 :active 状态下将渐变淡化至 0.7（即显示 30% 的黑色）alpha 值。

查看示例。

button {
    background-color: black;
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}

button:active {
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);    
} 

- ScottS