V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
sikuu2al
V2EX  ›  程序员

Element 主页的这个是咋实现的勒

  •  
  •   sikuu2al · 72 天前 · 3896 次点击
    这是一个创建于 72 天前的主题,其中的信息可能已经有所发展或是发生改变。
    - 在 element 页面滚动时,顶部 menu 栏遮住字体时会变成像素点 想问下这是咋实现的勒 还挺有意思的
    - 随便贴一个[https://element-plus.org/zh-CN/guide/namespace.html#%E8%AE%BE%E7%BD%AE-elconfigprovider]
    35 条回复    2024-10-14 14:30:20 +08:00
    Track13
        1
    Track13  
       72 天前   ❤️ 15
    ```css
    .navbar-wrapper{
    background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    }
    ```
    买个有 f12 的键盘吧
    gchxp
        2
    gchxp  
       72 天前
    f12 了一下应该是.navbar-wrapper 下面的几个背景属性实现的
    tpphha
        3
    tpphha  
       72 天前
    确实有点意思。
    7gugu
        4
    7gugu  
       72 天前
    看起来是用了 CSS 的新属性,看起来好酷
    justdoit123
        5
    justdoit123  
       72 天前   ❤️ 2
    找这个元素 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 的毛玻璃
    justdoit123
        6
    justdoit123  
       72 天前
    说真的,这玩意让我找可以找得到。

    但是让我“创造”出来,我还真不会。 厉害~ 厉害~
    7gugu
        7
    7gugu  
       72 天前
    @justdoit123 #5 主要是没想到 background-size 可以这么玩,太屌了
    liuidetmks
        8
    liuidetmks  
       72 天前
    css 总有你意想不到的使用方式。
    chinieer20
        9
    chinieer20  
       72 天前   ❤️ 1
    background-image:radial-gradient(transparent 1px, var(--bg-color) 1px) 这样式使得在背景上形成许多透明色( 穿透到覆盖的 dom 的颜色)和背景色交替的点,确实有点意思。
    sikuu2al
        10
    sikuu2al  
    OP
       72 天前
    感谢大家嗷
    iOCZS
        11
    iOCZS  
       72 天前
    技术层面是不错的,实际用途么,华而不实
    cswnodgmail
        12
    cswnodgmail  
       72 天前
    markdown 了,下一个私人的小项目就用
    sikuu2al
        13
    sikuu2al  
    OP
       72 天前
    @cswnodgmail 哈哈哈哈我也有这个想法
    cswnodgmail
        14
    cswnodgmail  
       72 天前
    顺手问了 AI ,分享出来供友友们参考:
    -----------
    这段 CSS 代码在不同浏览器中的兼容性情况如下:

    ### 兼容性分析

    1. **`position: relative;`**
    - **兼容性**:广泛支持,几乎所有浏览器都支持相对定位。

    2. **`border-bottom: 1px solid var(--border-color);`**
    - **兼容性**:CSS 变量(自定义属性)在现代浏览器中得到支持,但在较旧的浏览器(如 IE 11 及更早版本)中不支持。
    - **建议**:对于不支持 CSS 变量的浏览器,考虑使用常量值。

    3. **`height: var(--header-height);`**
    - **兼容性**:与 `--border-color` 相同,CSS 变量在现代浏览器中支持良好,但在 IE 11 及更早版本中不支持。

    4. **`padding: 0 12px 0 24px;`**
    - **兼容性**:标准的内边距属性,所有浏览器均支持。

    5. **`background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);`**
    - **兼容性**:径向渐变广泛支持,但 CSS 变量在 IE 11 中不支持。可以使用渐变的常量值替代。

    6. **`background-size: 4px 4px;`**
    - **兼容性**:所有现代浏览器均支持。

    7. **`backdrop-filter: saturate(50%) blur(4px);`**
    - **兼容性**:`backdrop-filter` 在 Safari 中完全支持,Chrome 和 Firefox 也支持,但在某些旧版浏览器中(包括 IE )不支持。需要注意的是,某些浏览器可能需要启用实验性功能。

    8. **`-webkit-backdrop-filter: saturate(50%) blur(4px);`**
    - **兼容性**:这是 WebKit 前缀的实现,主要用于 Safari 和一些 Android 浏览器。现代 Chrome 和其他基于 Chromium 的浏览器也支持。

    9. **`top: 0;`**
    - **兼容性**:所有浏览器均支持。

    ### 总结

    - **现代浏览器**(如 Chrome 、Firefox 、Safari 、Edge )对大部分属性都有很好的支持,但 CSS 变量不被 IE 11 及更早版本支持。
    - **渐变和背景滤镜**的支持情况较好,尤其是 `backdrop-filter`,在 Safari 中表现最佳。
    - 如果需要支持 IE 11 或其他较旧的浏览器,建议使用常量值替代 CSS 变量,并考虑使用渐变的硬编码值。

    ### 解决方案

    - **使用 Polyfills**:如果需要支持旧版浏览器,可以使用 Polyfill 来处理 CSS 变量。
    - **提供降级方案**:为不支持 CSS 变量和渐变的浏览器提供简单的样式作为降级方案。
    - **测试**:在主要目标浏览器中进行测试,以确保样式按预期工作。
    cswnodgmail
        15
    cswnodgmail  
       72 天前
    @sikuu2al 方便围观嘛哈哈哈哈
    com781517552
        16
    com781517552  
       72 天前
    买个有 f12 的键盘吧
    sikuu2al
        17
    sikuu2al  
    OP
       72 天前
    @cswnodgmail 哈哈哈下一个项目才用
    ochatokori
        18
    ochatokori  
       72 天前 via Android
    @iOCZS #11 那这么说全部换成白底黑字就行了,搞那么多 css 干什么🤣,华而不实
    iOCZS
        19
    iOCZS  
       72 天前
    @ochatokori 那也没那么绝对,没上面那块,肯定没什么影响。但你要说都黑白了,那肯定有碍观瞻
    shintendo
        20
    shintendo  
       72 天前
    @iOCZS 有碍观瞻,但是不影响使用,所以也是华而不实
    tog
        21
    tog  
       72 天前
    "买个有 f12 的键盘吧"
    回复这个的什么心态?
    isSamle
        22
    isSamle  
       72 天前
    .fixedSearch {
    position: fixed;
    width: 100%;
    z-index: 999;
    height: 50px;
    overflow: hidden;
    border-bottom: 1px solid var(--theme-color);
    background-image: radial-gradient(transparent 1px,#FFFFFF 2px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
    }
    isSamle
        23
    isSamle  
       72 天前
    已经加在自己的网站了
    [狗头滑稽]( https://img3.doubanio.com/view/photo/l/public/p2914100352.webp)
    kzfile
        24
    kzfile  
       72 天前
    css 是我认为最难的语言
    abss
        25
    abss  
       72 天前
    学到了 确实很有东西
    sss15
        26
    sss15  
       72 天前
    @justdoit123 #5 为啥我用 f12 加在 v 站上没效果呢
    512357301
        27
    512357301  
       72 天前 via Android
    @tog #21 估计是嫌 op 不动手操作直接就问吧,css 也没法加密,所见即所得,动动手的事,还要在 v 站问。
    yayaluoya481
        28
    yayaluoya481  
       72 天前
    给我博客加上了哈哈哈
    yelog
        29
    yelog  
       72 天前   ❤️ 2
    @sss15 背景也得设置为透明, 写了个 demo, 可以看一下 https://jsfiddle.net/yelog/g9mx504z/10/
    justdoit123
        30
    justdoit123  
       71 天前
    @sss15 那段 css 里有几个变量。v2 上应该没定义这些变量吧?把他们直接替换成具体值试试。哪个 --bg-color 是白色,别的变量自己查看下。
    LavaC
        31
    LavaC  
       70 天前   ❤️ 1
    这个效果出挺久的了,很久以前就见过有人拆解。顺便对对 css 感兴趣的站友们推荐一下这个博客主 https://github.com/chokcoco/iCSS/issues/194
    sikuu2al
        32
    sikuu2al  
    OP
       70 天前
    @LavaC 码住了 看了一下有很多有意思的!
    sss15
        33
    sss15  
       70 天前
    @yelog 原来如此,学了个皮毛,照着画都画不出来,惭愧惭愧
    sss15
        34
    sss15  
       70 天前
    @justdoit123 #30
    看了楼上的 demo ,原来这段里面缺了
    background-color: transparent;
    有了这个属性,再配合上面的属性才行
    tianhehechu
        35
    tianhehechu  
       70 天前
    @Track13 谢谢,已在京东下单了有 F12 的键盘
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3443 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 11:19 · PVG 19:19 · LAX 03:19 · JFK 06:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.