什么是 map-css-filters？
map-css-filters 是一个可以帮助开发者快速对网页上的图片应用 CSS 滤镜效果的 npm 包。这个包封装了常用的 CSS 滤镜效果，并提供了一份方便的 API 文档，用户可以根据自己的需要自定义 CSS 滤镜效果。
安装 map-css-filters
通过 npm 可以非常方便地安装 map-css-filters。在命令行中输入以下命令：
npm i map-css-filters
安装成功后，即可在项目中调用 map-css-filters。
使用 map-css-filters
以下为一个简单的使用示例：
import mapCssFilters from 'map-css-filters';
const myImg = document.querySelector('.my-image');
myImg.style.filter = mapCssFilters.sepia(0.5) + ' ' + mapCssFilters.brightness(1.2);这个示例中，我们选取了一个类为 ".my-image" 的图片，并对它应用了 sepia 和 brightness 滤镜效果。其中 sepia 的强度为 0.5，brightness 的强度为 1.2。
map-css-filters 支持的滤镜效果包括：
- blur
- brightness
- contrast
- grayscale
- hueRotate
- invert
- opacity
- saturate
- sepia
每个滤镜效果都可以设置不同的强度。如果需要组合多个滤镜效果，可以使用 CSS 的多属性写法，将不同的滤镜效果用空格隔开。
自定义 map-css-filters
如果需要使用自定义的滤镜效果，可以使用 map-css-filters 提供的 mapCssFilter 函数。以下是一个使用示例：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
----- ----- - ------------------------------------
----- -------- - ----------------------------- -
----- ------------
------ -
------- --
-
---
------------------ - ---------这个示例中，我们使用了 mapCssFilter 函数来自定义了一个名为 "custom-filter" 的滤镜效果，它的类型为 hueRotate，强度为 90 度。然后，我们将这个滤镜效果应用在了一张名为 ".my-image" 的图片上。
总结
map-css-filters 是一个简单易用的 npm 包，可以帮助开发者快速实现网页图片的滤镜效果。我们可以使用预设的滤镜效果、自定义滤镜效果，甚至结合 CSS 的多属性写法，实现更加复杂的滤镜效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ae881e8991b448d88c3