侧边栏壁纸
博主头像
科技美南博客 博主等级

科技改变生活,分享创造快乐

  • 累计撰写 67 篇文章
  • 累计创建 258 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

Wordpress的页眉CSS样式代码实现磨砂半透明效果

科技美南
2024-03-23 / 0 评论 / 1 点赞 / 301 阅读 / 0 字
温馨提示:
本文最后更新于2024-03-27,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

Wordpress的页眉CSS样式代码实现磨砂半透明效果

CSS代码

/*修改sticky--effects固定效果下下面下的固定效果下的背景的背景颜色 */
selector.elementor-sticky--effects{ background-color:#2794C5;background-color: rgba(39, 148, 197, .5);backdrop-filter: blur(10px);!important } 

/*修改sticky--effects固定效果下的section背景颜色切换速度 */
selector{ transition: background-color 1s ease !important; } 

/*修改sticky--effects固定效果下的section高度 */
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; } 

/*修改sticky--effects固定效果下的section高度变化速度 */
selector > .elementor-container{ transition: min-height 1s ease !important; } 
 
 /*修改sticky--effects固定效果下的section内菜单字体的颜色wei为黑色,这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects .elementor-nav-menu--main .elementor-item {
     color: #FFFFFF;
 }
 /*修改sticky--effects固定效果下的section内搜索按钮图标颜色为黑色,这里需要根据自己元素的选择器进行设置不可以直接复制*/
selector.elementor-sticky--effects  .elementor-search-form__toggle{
     color: #FFFFFF;
 }

效果演示

默认透明导航栏效果

20240323204447.jpg

下拉半透明毛玻璃效果

20240323204459.jpg

颜色,半透明,磨砂效果可以根据自己的UI去做调整修改

1
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin
  3. QQ打赏

    qrcode qq

评论区