18 Star 154 Fork 30

wordpress-theme / smarty_hankin

 / 详情

[兼容性] 页面半透明背景兼容性

待办的
创建于  
2020-02-26 13:57

Problem

  1. backdrop-filter不支持例如Firefox,Old_Edge等浏览器,导致页面半透明失效
    backdrop-filter 兼容性表

Solution

  1. 利用css @supports 检测是否支持,var()获取背景图片,如果不支持则回退至z-index+filter方案
    --var() 兼容性表
    @supports 兼容性表

Changes

  1. 修改layouts/header/head.php:51
From
<body class="background-blue" style="background:url(<?= $i_theme_background;?>) no-repeat fixed center;background-size:cover;">
To
<body class="background-blue" style="--background:url(<?= $i_theme_background;?>) no-repeat fixed center;background:var(--background);background-size:cover;">
  1. 在'assets/css/layout-blur-css.css'中加入如下内容
@supports not (backdrop-filter: blur(10px)){
    .mobile-overlay::after,.pcoded-header.headerpos-fixed::after,.toast::after,.pcoded-main-container::after,.pcoded-navbar.menu-light::after{
        background: var(--background);
        background-size: cover;
        content: '';
        position: absolute;
        top: 0;left: 0;right: 0;bottom: 0;z-index: -1;
        background-attachment: fixed;
    }
    .mobile-overlay::after,.pcoded-header.headerpos-fixed::after{
        filter: blur(5px);
    }
    .toast::after,.pcoded-main-container::after,.pcoded-navbar.menu-light::after{
        filter: blur(10px);
    }
}
  1. 在'assets/css/layout-dark.css'
@supports not (backdrop-filter: blur(10px)){
    .mobile-overlay::after,.pcoded-header.headerpos-fixed::after,.toast::after,#content::after,.pcoded-navbar.menu-light::after{
        background: rgba(0,0,0,0);
    }
}

Result (View in firefox/ Android-Edge)

link

Not Fixed

将模糊兼容置于layout-blur-css.css中时,layout-dark.css只有#content项生效(即移动端时顶栏的夜间模式失效),但是置于style.css中时都生效,使用!important似乎没有效果。因为我没有研究学习过css,所以优先级和排布可能需要您继续研究。
同时Android Edge似乎不支持background-attachment:fixed属性,故无法确定位置。

评论 (0)

Makira 创建了任务
Makira 关联仓库设置为wordpress-theme/smarty_hankin
展开全部操作日志

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(1)
2193968 makiras 1582798369
PHP
1
https://gitee.com/theme-smarty/smarty_hankin.git
git@gitee.com:theme-smarty/smarty_hankin.git
theme-smarty
smarty_hankin
smarty_hankin

搜索帮助

233307 c1314fcc 1850385 233305 0212f5e2 1850385