如题，可以使桌面端UI的顶栏添加一层高斯模糊个人觉得顶栏稍微做点模糊效果会更加美观，所以分享一下。当然这只是个人意见，不喜勿喷 @media (min-width:768px) { #header { background:rgba(255,255,255,0.8) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(3px); } } if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) { window.hljsLoader.highlightBlocks(document.currentScript.parentNode); }

桌面端顶栏高斯模糊

拜瑞

如题，可以使桌面端UI的顶栏添加一层高斯模糊

个人觉得顶栏稍微做点模糊效果会更加美观，所以分享一下。当然这只是个人意见，不喜勿喷

@media (min-width:768px) {
	#header {
	background:rgba(255,255,255,0.8) !important;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(3px);
	}
}

ray123

确实好看一些了很好的分享谢谢

huanli233

Image description
给我CPU干烧了（）

拜瑞

huanli233 草，我是强制设置了底色的，你可以自己改下

Clamours

加上了，很好看，谢谢楼主

JntmIkun

我做了一下夜间模式适配

@media (min-width:768px) {
    #header {
        & when (@config-dark-mode = false) {
            background:rgba(255,255,255,0.6) !important;
            -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(3px);
        }
        & when (@config-dark-mode = true) {
            background:rgba(0,0,0,0.6) !important;
            -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(3px);
        }
    }
}

14569

我比较喜欢这样的哈

@media (min-width:768px) {
    #header {
        & when (@config-dark-mode = false) {
            background:rgba(255,255,255,0.9) !important;
            backdrop-filter: blur(15px) saturate(150%);
        }
        & when (@config-dark-mode = true) {
            background:rgba(0,0,0,0.9) !important;
            backdrop-filter: blur(15px) saturate(150%);
        }
    }
}