如何在CSS中使用滤镜调整颜色_filter hue-rotate与brightness用法

新闻中心 NEWS CENTER

2025-11-26

浏览次数：次

答案：CSS filter 属性通过 hue-rotate() 调整色相，brightness() 控制亮度，可组合使用实现图像或元素的视觉效果优化。

如何在css中使用滤镜调整颜色_filter hue-rotate与brightness用法

在CSS中，filter 属性可以用来对元素（如图片、文本或容器）应用图形效果，比如模糊、亮度调整、色相旋转等。其中 hue-rotate() 和 brightness() 是两个常用的滤镜函数，分别用于调整颜色的色相和明暗程度。

hue-rotate() 函数用于改变元素的颜*调。它通过旋转色相环上的角度来实现颜色变化，单位是度（deg），范围从 0 到 360。

例如：

实际使用示例：

img { filter: hue-rotate(120deg); }

这会让图片整体色调向绿色或蓝色方向偏移。

brightness() 控制元素的明暗程度，接受一个无单位数值或百分比。

语鲸

AI智能阅读辅助工具

314

查看详情

常见用途：制作悬停高亮效果

img:hover {
  filter: brightness(1.2);
}

你可以同时使用多个滤镜，只需将它们用空格分隔写在同一行。

img { filter: hue-rotate(45deg) brightness(80%); }

这个例子会先旋转色调再降低亮度，适合营造复古或柔和的视觉风格。

注意：filter 属性会影响整个元素及其子元素，通常用于图片、图标或背景图。对于文字，也可以使用，但需注意可读性。

基本上就这些。灵活搭配 hue-rotate 和 brightness，可以在不替换资源的情况下快速调整视觉效果。

以上就是如何在CSS中使用滤镜调整颜色_filter hue-rotate与brightness用法的详细内容，更多请关注其它相关文章！