如何删除：活动状态的渐变？答案

【问题标题】：How do I remove gradient on :active state?如何删除：活动状态的渐变？
【发布时间】：2012-11-05 19:24:58
【问题描述】：

我需要让按钮在 :active 状态下看起来是平的。

比如说，我有：

button {
    background:linear-gradient(#fc9, #ed8) /* some light orange gradient */
}
button:hover {
    background:linear-gradient(#ed8, #da7) /* some darker orange gradient on hover */
}
button:active {
    background:orange; /* And here I need just plane flat orange color */
}

&lt;button&gt;Click Me!&lt;/button&gt;

但不是那样，而是从以前的状态获得渐变。

是否有任何背景 CSS 属性可以关闭该渐变？

例如blackground:liner-gradient-OFF; or background:no-inherit;

【问题讨论】：

您确定background: orange 还没有这样做吗？它应该，因为它隐式设置 background-image: none 应该覆盖你的渐变。
哇！谢谢你们。看来问题已经解决了！背景图像：无；关闭任何以前的渐变。至少现在点击一下，我就有了一个扁平的橙色。 @BoltClock我不知道为什么它应该覆盖渐变，但在我的情况下它没有。不是第一次注意到这个问题

标签： css state gradient

【解决方案1】：

你真正需要的是：

button:active {
    background-image: none;
    background-color:orange;
}

【讨论】：

谢谢——我一直在寻找比“无”更具体的选择器，但我没有意识到线性渐变是背景图像的一种形式。
@AndyGiesler 活动状态将从默认状态继承样式。因此，当您使用背景属性时，您可以更具体地进行选择。所以你可以在同一个类中使用背景颜色和背景图像。当您使用 CSS3 渐变时，线性渐变会自动分配给 background-image 属性，因此您需要将其设为无。因此，您只有 2 个可以使用的属性，即 background-image: none 和 background-color: transparent 并按照您的意愿使其平坦，我的答案已经可用。

【解决方案2】：

您确定 :active 是您要查找的状态吗？ :active 状态仅在您单击按钮时显示（鼠标按钮按下）。释放按钮后，状态不再是 :active。

【讨论】：

@csdragonchick 感谢您的回复。是的，这正是我在这种情况下通常使用的方法:) 你知道模拟按下真实物理按钮的另一种方法吗？据我所知 :active 状态正是按钮的真正按下和释放状态。结合 3d css 效果，它可以真正发挥作用:)