导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter

曾经终败给现在 2024-05-24 03:26 25阅读 0赞

## 导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 `backdrop-filter` ##

传统情况模糊导航栏效果 ? 一种比较新的模糊导航栏效果(比如 [Element-Plus][] 官网的导航栏效果, 有些类似密集点阵式)

![在这里插入图片描述][2e9ebf77ba83436aad99ea4ffaf3ff86.png_pic_center]

![在这里插入图片描述][96c41a8f817a48ef972b8dbd2bcd37a9.png_pic_center]

导航栏要实现这个效果必须设置背景为有透明的颜色并且通过 `backdrop-filter` 使用 `filter`. 看来我们必不可绕过 `backdrop-filter`

### [backdrop-filter][] ###

> `backdrop-filter` 允许开发者将模糊或色彩偏离等图形效果应用到元素背后的区域. 因为它应用于元素背后所有内容, 因此如果你想要看到效果必须将元素的背景设置部分透明.

`backdrop-filter` 只有一个关键词属性值, `none` 表示不应用任何滤镜.

![在这里插入图片描述][29a52af7c4b34082bcf984f30e5c3ab0.png_pic_center]

.part {
        
      background: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .part::before {
        
      background-color: rgba(255, 255, 255, .05);
    }
    .blur::before {
        
      backdrop-filter: blur(2px); /** 其他类似 */
    }

看完上面代码, 会让人有一点疑惑, 好像很多滤镜都生效了, 但是有两个就是没有生效, 分别是 `drop-shadow` 和 `opacity`. 为此, 我进行了调研…?

虽然 `backdrop-filter` 是添加到前面的元素的 `CSS` 规则中却应用在后面的元素, 但是对于 `drop-shadow` 特殊一点, 必须前后元素同时应用才可以看到效果. 很有意思的是, `tailwindcss` 中没有这个滤镜?

.drop-shadow::before {
        
      backdrop-filter: drop-shadow(1px 1px 10px red);
    }
    .drop-shadow {
        
      backdrop-filter: drop-shadow(1px 1px 10px red);
    }

![在这里插入图片描述][11b9006fc9e44c8ba88218aa4b5b4a56.png_pic_center]

接下来说到为什么 `opacity` 没有效果, 不, 它有效果, 只是单单只用这一个滤镜 `opacity` 看不出来效果. 如下图, 应用了更大值 `opacity` 之后还是能看到 `hue-rotate` 的变化被减弱了.

![在这里插入图片描述][f4dafabe7f774ed797a8e6f99216edbf.png_pic_center]

### 新的模糊导航栏效果 ###

聪明的小伙伴可能已经想象到如何实现这个效果了, 那就是调整 `background-size` 大小实现平铺. 另外一点就是不能使用 `background-color` 而要用 `background-image`. 先看效果

nav {
        
      position: sticky;
      top: 0;
      padding: 10px 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image: radial-gradient(transparent 1px, #fff);
      background-size: 4px 4px;
      backdrop-filter: blur(6px);
    }

![在这里插入图片描述][aadf48a5561f4b1fa9d376d917d2dcd4.png_pic_center]

我们来说下为什么不能使用 `background-color`, 因为要实现点阵式效果, 就要保证每个的 `4px` 宽高的背景「有一定距离」. 实际上这些每个小背景之间是互相紧密排列的没法强行增加间隔. 所以我们使用径向渐变, 从透明色渐变为白色, 这样不同背景都是以白色互相连接而透明部分互相隔离, 看起来就是点阵式了. 下图是灵魂画手的简笔画说明?  
![在这里插入图片描述][191ba6cda7b144d985d76ac26a8a19e9.png_pic_center]

谢谢你看到这里?

[Element-Plus]: https://element-plus.gitee.io/en-US/
[2e9ebf77ba83436aad99ea4ffaf3ff86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/b4c88270dbea41898c3c3e74b33eebc6.png
[96c41a8f817a48ef972b8dbd2bcd37a9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/f035a825050b4c98979678d09c26c902.png
[backdrop-filter]: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
[29a52af7c4b34082bcf984f30e5c3ab0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/7aa45c9546384af9a1ea700d4a6b09c7.png
[11b9006fc9e44c8ba88218aa4b5b4a56.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e84236a88015485baf63ff034708de36.png
[f4dafabe7f774ed797a8e6f99216edbf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/1a2f19a60e53451fae3ed540bf34abeb.png
[aadf48a5561f4b1fa9d376d917d2dcd4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/bb4b5fb78a814798ad80ebf625465ecc.png
[191ba6cda7b144d985d76ac26a8a19e9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/c1f5915275f643cd929d319981bc4aff.png