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

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

推荐整理分享CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter(css实现背景图片变透明)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css背景图像设置,css实现背景图片变透明,css 背景图,css实现背景图片透明,css实现背景图片旋转,css实现背景图片透明,css实现背景图片变透明,css实现背景图片旋转,内容如对您有帮助，希望把文章链接给更多的朋友！

💭💭

✨： CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter   💟：东非不开森的主页   💜: 因为很多东西来不及去做去看可是时间很快总是赶不上，所以要去成长呀💜💜   🌸: 如有错误或不足之处，希望可以指正，非常感谢😉  

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

毛玻璃效果一、使用filter: blur()二、backdrop-filter: blur()补充：filter、backdrop✨✨一、使用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 :

<div class="bg"> <img src="./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：

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

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

补充：filter、backdrop✨✨

✨✨

推荐去mdn官网看哦: MDN

filter

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

 

blur filter: blur() 单位是px 越大越模糊

opacity filter: opacity() 透明度，设置元素的透明度在0~1之间 0:完全透明 1:无效

grayscale filter: grayscale() 使图片变灰

blablabla~~ 和我我下面总结的属性都是一致的（太累了，不想打了，用到啥就去搜吧嘿嘿）

  2. 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%);

(～￣▽￣)～