使用RGBA颜色叠加CSS渐变？

Question

我想为按钮添加一个透明的黑色覆盖图':活动状态,所以当你点击它时,它是相同的渐变,但只有一个叠加的例如 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

::after您可以使用伪元素来做到这一点。

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

现场小提琴演示