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

Posted 2023-04-05 东非不开森

💭💭

✨： 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

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

(～￣▽￣)～

教你几行代码实现图片的模糊效果

 

一张清楚的图片变的模糊了，也就是所谓的毛玻璃效果，通过查看图层可以发现，它只是在原有的图片上加了一个View，而这个View具有毛玻璃效果，

图层查看如下图所示：

 

最终效果图如下图：

1 1     // 创建图片
2 2     UIImageView *imgView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
3 3     imgView.image = [UIImage imageNamed:@"1"];
4 4     [self.view addSubview:imgView];
5 5     //添加模糊效果
6 6     UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
7 7     UIVisualEffectView *effectView = [[UIVisualEffectView alloc]initWithEffect:blurEffect];
8 8     effectView.frame = [UIScreen mainScreen].bounds;
9 9     [imgView addSubview:effectView];