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;
      } 

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

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

二、backdrop-filter: blur()

⭐⭐⭐⭐⭐

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

1.背景固定，背景的宽高要和图片一致

在添加另外一个元素（即为滤镜），给它设透明度和模糊值

给背景和滤镜设置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);
      } 

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

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/40469.html