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

你做不到; 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;
}

Live Fiddle demo

Answer 3

反思思考

设置background-color: black并覆盖渐变，颜色从十六进制转换为rgba（最初设置为1表示alpha），然后在:active上将渐变淡化为0.7 （将显示30％黑色）alpha。

See the fiddle

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

使用RGBA颜色叠加CSS渐变？

3 个答案:

反思思考