Question

假设我有一个使用以下CSS设置样式的按钮：

background-image: linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -o-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -moz-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -ms-linear-gradient(bottom, rgb(112,166,30) 41%, rgb(150,222,42) 71%);
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.41, rgb(112,166,30)),
 color-stop(0.71, rgb(150,222,42))
);

保持相同颜色但显示更亮的简单方法是什么？基本上是在悬停输入元素时改变样式。

Answer 1

使用CSS3，您现在可以使用更有趣的颜色模型：HSL，其中L是光。当你想让你的颜色亮度变化时，这是一个很好的模型。如果你想要做得更亮（不要因为在它上面使用白色层而变得苍白），这就是你要走的路。

如果您不想更改css，则必须进行编码。例如，您可以读取并解析css颜色（使用jquery css function），并在悬停对象时将其动态设置为灯光组件的其他值。

但是，如果您有许多颜色和渐变，最好的解决方案可能是使用像less这样的动态样式表，您可以在其中简单地定义2个（或更多）亮度值以包含在您的css规则中。

Answer 2

云在渐变元素后面有一个白色背景元素（将当前代码包装在div或其他内容中），然后在悬停时更改颜色的不透明度。否则，您将完全需要不同的颜色。

希望有所帮助。：）

Answer 3

使用两个类：

.button {
... your existing css
}

然后使用一组单独的颜色：hover

.button:hover {
... your existing css with different colours
}

您实际上是使用CSS设置不同的颜色值。

这是一个方便的工具：http://www.colorzilla.com/gradient-editor/

在渐变中使颜色更亮

3 个答案: