0

假设我有一个使用以下 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))
);

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

4

3 回答 3

0

使用两个类：

.button {
... your existing css
}

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

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

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

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

于 2012-06-21T17:31:35.387 回答
0

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

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

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

于 2012-06-21T17:30:09.647 回答
0

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

希望有帮助。:)

于 2012-06-21T17:31:24.890 回答