概述
CSSGram 是一个基于 CSS 的图像滤镜库，通过简单的 HTML 元素和 CSS 类，可以将 Instagram 等应用中常见的滤镜效果应用到网页图片上。本篇文章将介绍如何使用 npm 包 cssgram 在前端项目中使用 Instagram 滤镜。
安装
在终端中输入以下命令进行安装：
npm install cssgram
引入
在需要使用滤镜的文件中引入 cssgram：
<link rel="stylesheet" href="./node_modules/cssgram/cssgram.min.css">
使用
基础用法
在需要添加滤镜的元素上，添加对应的 CSS 类即可：
<img src="./image.jpg" class="css-filter-class">
例如，添加黑白滤镜：
<img src="./image.jpg" class="cssfilter-aden">
目前该库提供了 19 种不同的滤镜效果，具体效果可以查看官方文档。
自定义样式
除了使用预设的滤镜样式外，还可以根据需要自定义样式，例如修改透明度和对比度：
.custom-filter {
filter: grayscale(100%) opacity(0.5) contrast(200%);
}<img src="./image.jpg" class="custom-filter">
JavaScript 控制
通过 JavaScript 可以动态控制滤镜效果，例如在鼠标悬停时添加一个模糊效果：
.blur-filter {
filter: blur(3px);
}<img src="./image.jpg" class="blur-filter">
-- -------------------- ---- ------- ----- --- - ------------------------------ ---------------------------------- -- -- - --------------------------------- --- ---------------------------------- -- -- - ------------------------------------ ---
结语
通过 npm 包 cssgram 可以轻松地在前端项目中使用 Instagram 等应用中常见的滤镜效果，提升网页的视觉效果。同时，在自定义样式和 JavaScript 控制的基础上，可以实现更多复杂的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33018
