给wordpress独立站导航栏添加毛玻璃效果

继续分享wordpress外贸建站教程。前段时间给一个客户做wordpress外贸独立站，客户临时想添加一个导航栏的毛玻璃效果。这个功能有一些主题和插件可以直接实现，比如Blocksy Pro、Astra Pro，还有一些elementor扩展插件也可以实现。但是这个客户的wordpress外贸独立站已经基本完成，没有用到这些主题和插件，就是用的原生的elementor，没加其它扩展插件。

本着能不加插件就尽量不加的原则，我使用了一个简单的CSS来实现这样的效果，代码如下：

/* 桌面 + 移动都毛玻璃 */
selector {
    position: relative;
    background-color: transparent;
    isolation: isolate; 
}

selector::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

上面的代码中，颜色、背景透明度、blur的数值可以按需修改。

复制上面的CSS代码，然后打开网站的页眉模板，选中最上层容器，打开【Advanced-Custom CSS】,粘贴CSS代码，如上图所示。代码中的颜色、透明度、Blur等数值可以按需修改，边改边看效果，改到自己满意即可。然后保存或更新模板就行了。

可以清空一下网站缓存，然后打开网站的前端页面查看效果，如上图所示，导航栏下面的背景已经呈现出了模糊效果。需要注意的是这种毛玻璃模糊效果主要由页面中的图片而定，明亮且色彩丰富的背景图片模糊起来会更好看一些，如果图片比较暗，且色彩单一，那效果就比较一般了。

上面的CSS代码大家也可以用在其它地方，但不建议频繁使用，因为这种效果多了之后可能造成卡顿。