CSS `filter` 属性详解:图像滤镜效果全解析

CSS filter 属性提供了强大的图像处理功能,允许开发者在不借助图像编辑软件的情况下,直接通过CSS代码为网页元素(主要是图片)添加各种视觉效果。下面我将详细解析你提供的代码示例,并全面介绍所有可用的滤镜函数

基本语法

js 复制代码
.filtered-image {
  filter: <filter-function> [<filter-function>]* | none;
}

代码示例解析

js 复制代码
.filtered-image {
  filter: grayscale(50%) blur(2px);
  /* 其他滤镜 */
  filter: 
    brightness(1.2)
    contrast(0.8)
    sepia(0.3);
}

注意 :这个示例中有两个filter声明,实际使用时只会应用最后一个(CSS的层叠特性)。正确的做法应该是将所有滤镜函数合并到一个filter属性中:

js 复制代码
.filtered-image {
  filter: 
    grayscale(50%) 
    blur(2px)
    brightness(1.2)
    contrast(0.8)
    sepia(0.3);
}

各滤镜函数详解

1. grayscale() 灰度滤镜

  • 作用:将图像转换为灰度图

  • 参数:0%到100%之间的值

    • 0%:原始图像
    • 100%:完全灰度
  • 示例

js 复制代码
filter: grayscale(50%); /* 50%灰度 */
filter: grayscale(1);   /* 等同于100%,完全灰度 */

2. blur() 模糊滤镜

  • 作用:对图像应用高斯模糊

  • 参数:长度值(如px、rem等),值越大越模糊

    • 0:无模糊
  • 示例

js 复制代码
filter: blur(2px); /* 2像素模糊 */
filter: blur(0.5rem); /* 使用相对单位 */

3. brightness() 亮度调节

  • 作用:调整图像亮度

  • 参数:数值或百分比

    • 1或100%:原始亮度
    • <1:变暗
    • 1:变亮

    • 0:全黑
  • 示例

js 复制代码
filter: brightness(1.2); /* 亮度提高20% */
filter: brightness(80%); /* 亮度降低20% */

4. contrast() 对比度调节

  • 作用:调整图像对比度

  • 参数:数值或百分比

    • 1或100%:原始对比度
    • <1:降低对比度
    • 1:提高对比度

    • 0:完全灰
  • 示例

js 复制代码
filter: contrast(0.8); /* 对比度降低20% */
filter: contrast(120%); /* 对比度提高20% */

5. sepia() 棕褐色滤镜

  • 作用:将图像转换为棕褐色调(复古效果)

  • 参数:0%到100%之间的值

    • 0%:原始图像
    • 100%:完全棕褐色
  • 示例

js 复制代码
filter: sepia(0.3); /* 30%棕褐色效果 */
filter: sepia(100%); /* 完全复古效果 */

其他重要滤镜函数

6. hue-rotate() 色相旋转

  • 作用:改变图像的整体色调

  • 参数:角度值(deg)

    • 0deg:无变化
    • 360deg:完整色环旋转
  • 示例

js 复制代码
filter: hue-rotate(90deg); /* 色调旋转90度 */

7. saturate() 饱和度调节

  • 作用:调整图像颜色饱和度

  • 参数:数值或百分比

    • 1或100%:原始饱和度
    • <1:降低饱和度
    • 1:增加饱和度

    • 0:完全去色(与grayscale(100%)类似)
  • 示例

js 复制代码
filter: saturate(1.5); /* 饱和度提高50% */

8. opacity() 透明度调节

  • 作用:调整图像透明度

  • 参数:0到1之间的值

    • 1:完全不透明
    • 0:完全透明
  • 注意 :与opacity属性不同,filter: opacity()在某些浏览器中可能有更好的性能

  • 示例

js 复制代码
filter: opacity(0.7); /* 70%不透明 */

9. invert() 颜色反转

  • 作用:反转图像颜色

  • 参数:0%到100%之间的值

    • 0%:原始图像
    • 100%:完全反转
  • 示例

js 复制代码
filter: invert(100%); /* 完全反转颜色 */

10. drop-shadow() 投影效果

  • 作用 :为图像添加投影(比box-shadow更符合图像轮廓)

  • 参数 :与box-shadow类似,但不支持insetspread

    • drop-shadow(offset-x offset-y blur-radius color)
  • 示例

js 复制代码
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));

组合使用多个滤镜

可以组合多个滤镜函数,按顺序应用效果:

js 复制代码
.complex-filter {
  filter: 
    brightness(1.1)
    contrast(1.2)
    saturate(1.3)
    hue-rotate(15deg)
    drop-shadow(2px 2px 5px #333);
}
相关推荐
知了清语16 分钟前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆38 分钟前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku41 分钟前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined243 分钟前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo1 小时前
搭建第一个Shopify App
前端·程序员
然我1 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
Codebee1 小时前
OneCode 组件服务通用协议栈:构建企业级低代码平台的技术基石
前端·前端框架·开源
Running_C1 小时前
常见web攻击类型
前端·http
jackyChan1 小时前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript