如何在CSS中按百分比动态调整颜色亮度？

使用 CSS 百分比进行动态颜色调整

按百分比调整颜色的亮度或亮度是 CSS 定制和个性化中的常见任务。在现代浏览器中，可以使用 CSS 过滤器有效地实现这一点。

按百分比减少 CSS 颜色

提供的 CSS 代码片段尝试通过分配一个颜色属性或蓝色的负百分比。然而CSS不支持这样的操作。相反，CSS 滤镜可用于动态修改颜色亮度。

使用滤镜调整颜色亮度

CSS 滤镜属性允许您对元素应用预定义的转换，包括颜色处理。要将颜色减少一定百分比，您可以使用 Brightness() 过滤器。以下代码演示了如何将“按钮”元素的颜色加深 15%：

.button {
  color: #ff0000;
}

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

在此示例中，brightness() 滤镜应用于悬停时的按钮元素。 85% 的值会降低颜色的亮度，使其变暗。请注意，100% 代表基线亮度，低于 100% 的值会产生较暗的颜色，而高于 100% 的值会产生较亮的颜色。

通过使用此方法，您可以通过指定百分比来动态调整元素的颜色，让您可以更好地控制 Web 应用程序中的颜色个性化和定制。

以上是如何在CSS中按百分比动态调整颜色亮度？的详细内容。更多信息请关注PHP中文网其他相关文章！