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

## Problem

1. backdrop-filter不支持例如Firefox,Old_Edge等浏览器，导致页面半透明失效
[backdrop-filter 兼容性表](https://caniuse.com/#search=backdrop-filter)

## Solution

1. 利用css `@supports` 检测是否支持，`var()`获取背景图片，如果不支持则回退至`z-index`+`filter`方案
[`--var()` 兼容性表](https://caniuse.com/#search=var())
[`@supports` 兼容性表](https://caniuse.com/#feat=css-featurequeries)

## Changes

1. 修改`layouts/header/head.php:51`
```php
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;">
```
2. 在'assets/css/layout-blur-css.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);
    }
}
```
3. 在'assets/css/layout-dark.css'
```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](https://makiras.org)

## Not Fixed

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

wordpress-theme/smarty_hankin

内容风险标识

评论 (0)