5

我想为它的按钮添加一个透明的黑色覆盖层'：活动状态，所以当你点击它时，它是相同的渐变，但只有一个覆盖层，例如rgba(0,0,0,.3)

我认为这可行的方式是（在此示例中使用 webkit）：

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

或没有逗号，顺序颠倒了……但什么也没有出现！

我不热衷于添加另一个 div 来充当叠加层，那么有没有严格的 CSS 方法来做到这一点？我在想也许它是一个:before或:after伪类，但我不知道如何使用这些！

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

4

3 回答 3

3

你不能那样做；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在开发时总是指定而不是使用简写 - 它使调试更容易。

于 2012-06-02T01:28:24.243 回答
2

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

首先，您需要定义按钮 CSS with 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;
}

现场小提琴演示

于 2012-06-02T01:41:28.033 回答
1

反向思考

使用从十六进制转换为 rgba（最初设置为 alpha）的颜色设置background-color: black并覆盖渐变，然后将渐变淡化为（将显示 30% 黑色）alpha。1:active0.7

见小提琴。

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%);    
}
于 2012-06-02T01:27:46.703 回答