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);
}
相关推荐
绅士玖11 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子20 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang21 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy1 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js