如何使用 CSS 动态调整颜色的亮度？

使用 CSS 滤镜进行动态颜色操作

问题：

我们如何动态地变亮或变亮使用 CSS 使指定颜色变暗？我们可以按百分比减少颜色吗？

答案：

是的，可以使用 CSS 过滤器按百分比减少颜色。操作方法如下：

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

在此示例中，按钮的基色设置为红色 (#ff0000)。通过对悬停时的按钮应用滤镜，亮度会降低 15%，从而产生较暗的红色阴影。可以调整百分比以达到所需的亮度或暗度水平。

这种方法与所有现代浏览器兼容，这一点从 caniuse 兼容性表中的广泛可用性中可以看出。

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