HTML图片滤镜效果怎么应用

来源：IPIPP.com作者：陈平安头衔：全栈工程师

导读：本期聚焦于小伙伴创作的《HTML图片滤镜效果怎么应用》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《HTML图片滤镜效果怎么应用》有用，将其分享出去将是对创作者最好的鼓励。

在前端开发中，给图片添加滤镜效果是很常见的需求，很多开发者会疑惑HTML图片滤镜效果怎么应用。其实HTML本身没有原生的滤镜功能，我们需要借助CSS的filter属性来实现各类图片滤镜效果，操作起来非常简单。

HTML图片滤镜效果怎么应用

CSS filter属性基础

CSS的filter属性可以为元素（尤其是图片、背景等视觉元素）添加模糊、颜色偏移等图形效果，所有主流浏览器都支持该属性。它的语法格式如下：

/* 基础语法 */
filter: 滤镜函数(参数);
/* 多个滤镜叠加 */
filter: 滤镜函数1(参数1) 滤镜函数2(参数2);

blur()函数可以给图片添加高斯模糊效果，参数值越大模糊程度越高，单位通常是px。

/* 给类名为img-blur的图片添加5px模糊 */
.img-blur {
    filter: blur(5px);
}

<img src="https://picsum.photos/800/400?random=1" class="img-blur" alt="模糊图片示例" />

grayscale()函数可以将图片转为灰度图，参数取值为0到1之间，或者0%到100%之间，1或100%表示完全灰度。

/* 给类名为img-gray的图片添加完全灰度效果 */
.img-gray {
    filter: grayscale(100%);
}

brightness()函数可以调整图片的亮度，参数小于1降低亮度，大于1提升亮度，100%为原始亮度。

/* 给类名为img-bright的图片提升50%亮度 */
.img-bright {
    filter: brightness(150%);
}

contrast()函数可以调整图片的对比度，参数小于1降低对比度，大于1提升对比度，100%为原始对比度。

/* 给类名为img-contrast的图片提升30%对比度 */
.img-contrast {
    filter: contrast(130%);
}

saturate()函数可以调整图片的饱和度，参数小于1降低饱和度，大于1提升饱和度，100%为原始饱和度。

/* 给类名为img-saturate的图片降低50%饱和度 */
.img-saturate {
    filter: saturate(50%);
}

如果需要同时应用多个滤镜效果，只需要在filter属性中空格分隔多个滤镜函数即可，执行顺序从左到右。

/* 同时应用模糊、灰度、亮度调整三个滤镜 */
.img-multi-filter {
    filter: blur(2px) grayscale(50%) brightness(120%);
}

提示：除了上述提到的滤镜函数，CSS filter还支持sepia()（褐色滤镜）、hue-rotate()（色相旋转）、invert()（反相滤镜）等，使用方式和上述示例类似，只需要替换对应的函数名和参数即可。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。