如何使用 CSS 动态变亮或变暗颜色？-css教程-PHP中文网

如何使用 CSS 动态变亮或变暗颜色？

Barbara Streisand

发布： 2024-11-17 19:22:02

原创

903 人浏览过

How Can I Dynamically Lighten or Darken Colors Using CSS?

使用 CSS 百分比动态变亮或变暗颜色

在 Web 开发中，使用颜色自定义用户界面至关重要。有时，您可能需要根据用户偏好或特定条件动态调整元素的颜色。但是，如果用户想要定制的配色方案，静态十六进制代码可能会受到限制。

现代浏览器提供了使用 CSS 过滤器的解决方案。使用这些滤镜，您可以通过调整元素的亮度百分比来修改元素的颜色。这允许您在不改变色调的情况下使颜色变亮或变暗。

要应用亮度滤镜，请使用以下语法：

filter: brightness(percentage);

登录后复制

例如，将颜色变亮 50% ，您可以使用：

filter: brightness(50%);

登录后复制

将颜色加深 15%，使用：

filter: brightness(85%);

登录后复制

下面是一个演示效果的示例：

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

登录后复制

<button class="button">Foo lorem ipsum</button>

登录后复制

在这个示例中，“button”类包含红色。当按钮悬停在上方时，“button:hover”类应用 85% 的亮度滤镜，使红色稍微变暗。

以上是如何使用 CSS 动态变亮或变暗颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！