CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter

💭💭

✨： CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter

💟：东非不开森的主页

💜: 因为很多东西来不及去做去看可是时间很快总是赶不上，所以要去成长呀💜💜

🌸: 如有错误或不足之处，希望可以指正，非常感谢😉

应用场景：在音乐类的项目，会有让图片当背景模糊的效果
如下图：

毛玻璃效果

一、使用filter: blur()

⭐⭐⭐

• filter: blur()，把图片变模糊的同时，四周也会模糊，没有边界，就不好看哈哈
• 给它一个父级元素，父元素控制宽高，超出部分隐藏

css

.bg{position: fixed;width: 450px;height: 253px;overflow: hidden;}.bg-image{width: 100%;filter:blur(5px);}.bg-image::after{content:"";display: block;background:rgba(0, 0, 0, 0.5);z-index: 1;}

html 

:

<divclass="bg"><imgsrc="./images/动漫.jpg"alt=""class="bg-image"/></div>

预览效果：

虽然四周是清晰了，但是还是会看见白色的边边。

二、backdrop-filter: blur()

⭐⭐⭐⭐⭐

原本图片，想要毛玻璃效果，给它加滤镜（注意，并不是图片模糊化，是给它加滤镜）

• 背景固定，背景的宽高要和图片一致
• 在添加另外一个元素（即为滤镜），给它设透明度和模糊值
• 给背景和滤镜设置z-index:-1, 使用负值降低优先级,防止添加在模糊图片上的文字图片模糊

代码：

css

：

.bg-image,
      .inner{position: fixed;top: 0;left: 0;width: 450px;height: 253px;z-index: -1;}.inner{background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(5px);}

html

：

<divclass="bg-image"><imgsrc="./images/动漫.jpg"alt=""class="img"width="100%"/><divclass="inner"></div></div>

预览效果：

这样就是我们要的效果了，nice~

补充：filter、backdrop✨✨

✨✨

推荐去mdn官网看哦: MDN

1. filter

mdn文档这样介绍：
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

• blur filter: blur() 单位是px 越大越模糊
• opacity filter: opacity() 透明度，设置元素的透明度在0~1之间 0:完全透明 1:无效
• grayscale filter: grayscale() 使图片变灰blablabla~~ 和我我下面总结的属性都是一致的（太累了，不想打了，用到啥就去搜吧嘿嘿）

1. backdrop-filter

mdn文档这样介绍：

backdrop-filter

CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

也就是说给图片加了一层滤镜（我是这样理解的）
常见属性：

• backdrop-filter: blur(); 高斯模糊滤镜
• backdrop-filter: brightness(); 图片明亮度滤镜
• backdrop-filter: contrast(); 对比度滤镜
• backdrop-filter: drop-shadow();阴影滤镜
• backdrop-filter: grayscale();灰度滤镜
• backdrop-filter: hue-rotate();色相滤镜
• backdrop-filter: invert();反转滤镜
• backdrop-filter: opacity();透明度滤镜
• backdrop-filter: sepia();深褐色滤镜
• backdrop-filter: saturate();饱和度滤镜

示例：
括号里面为他们所用的值和单位

backdrop-filter:blur(2px);backdrop-filter:brightness(60%);backdrop-filter:contrast(40%);backdrop-filter:drop-shadow(4px 4px 10px blue);backdrop-filter:grayscale(30%);backdrop-filter:hue-rotate(120deg);backdrop-filter:invert(70%);backdrop-filter:opacity(20%);backdrop-filter:sepia(90%);backdrop-filter:saturate(80%);

(～￣▽￣)～