在前端开发中，经常需要处理图片的模糊效果，而使用 CSS 的 blur 属性来实现模糊处理的话，会影响到整个元素，无法只针对背景进行处理。这时候就可以使用 background-blur 这个 npm 包来实现仅对背景进行高斯模糊处理。
安装
你可以通过 npm 安装 background-blur：
npm install background-blur
然后在项目中引入该包：
import { blur } from 'background-blur';或者在 HTML 页面中直接使用：
<script src="https://unpkg.com/background-blur"></script>
使用
基本用法
使用 background-blur 很简单，我们只需传递两个参数：需要模糊的元素和模糊半径。其中，模糊半径的单位是像素。
const element = document.querySelector('.background-element');
const radius = 10;
blur(element, radius);这样，.background-element 元素的背景就会被高斯模糊处理，模糊半径为 10 像素。
更多选项
除了基本用法外，background-blur 还提供了其他一些选项，可以帮助我们更好地控制模糊效果。
颜色
默认情况下，background-blur 使用背景颜色作为模糊后的颜色。但是，我们也可以使用其他颜色来替代。
const element = document.querySelector('.background-element');
const radius = 10;
const color = '#ffffff';
blur(element, radius, { color });不透明度
我们还可以控制模糊效果的不透明度，默认值为 0.75。
const element = document.querySelector('.background-element');
const radius = 10;
const opacity = 0.5;
blur(element, radius, { opacity });容器
如果需要将高斯模糊的背景放置在一个容器内，可以使用 container 参数。
<div class="background-container"> <div class="background-element"></div> </div>
const container = document.querySelector('.background-container');
const element = container.querySelector('.background-element');
const radius = 10;
blur(element, radius, { container });这样，高斯模糊的背景就会被放置在 .background-container 容器中。
示例代码
以下是一个基本的示例代码：
-- -------------------- ---- ------- ---- ----------------------------- ---- --------------------------------- ------ ------- ------------------------------------------------- -------- ----- --------- - ------------------------------------------------ ----- ------- - ----------------------------------------------- ----- ------ - --- ------------- ------- - ------ ---------- -------- ---- --------- --- --------- ------- --------------------- - ------ ----- ------- ------ --------- --------- - ------------------- - ------ ----- ------- ----- --------- --------- ---- -- ----- -- ----------------- ------------------------------------- - --------
以上代码会将图片的背景高斯模糊处理，模糊半径为 10 像素，使用白色作为模糊后的颜色，并且不透明度为 0.5，最终效果如下：
总结
通过本文对 background-blur 的介绍，我们了解了这个 npm 包的基本用法和更多选项。使用 background-blur 可以让我们更加灵活地处理页面中的背景模糊效果，提
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35510