用RGBA颜色覆盖CSS渐变？

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伪类，但是我不知道如何使用它们！

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

Answer 1

你不能那样做； 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而不使用速记的原因-它使调试更加容易。

Answer 2

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

首先，您需要使用position: relative定义按钮CSS，然后将::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;
}

现场小提琴演示

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%);    
}