在 element 页面滚动时,顶部 menu 栏遮住字体时会变成像素点

2024-10-12 11:36:58
50次阅读
0个评论



https://element-plus.org/zh-CN/guide/namespace.html#%E8%AE%BE%E7%BD%AE-elconfigprovider



元素 header > .navbar-wrapper 有相关的样式:


.navbar-wrapper {
position: relative;
border-bottom: 1px solid var(--border-color);
height: var(--header-height);
padding: 0 12px 0 24px;
background-image: radial-gradient(transparent 1px,var(--bg-color) 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
top: 0
}


最主要的有三个:

1. background-image 的 径向渐变

2. background-size 限制单元的大小

3. backdrop-filter 的毛玻璃


background-image:radial-gradient(transparent 1px, var(--bg-color) 1px) 这样式使得在背景上形成许多透明色( 穿透到覆盖的 dom 的颜色)和背景色交替的点


收藏00

登录 后评论。没有帐号? 注册 一个。