最近新认识的 <details> [open] backdrop-filter

作者: 科技微讯

日期:

关于 <details> <summary> [open]

<html>
<head>
   <style>
        details[open]{
        color: red
    }
   </style>
</head>
<body>
    <details>
        <summary>
            科技微讯的公众号是什么?
        </summary>
        <img src="https://mp.weixin.qq.com/mp/qrcode?scene=10000005&size=102&__biz=MzA4NjQyNTc4Mg==&mid=307418443&idx=1&sn=592e4ac77eb6808ad13faf4e02fc9699&send_time=">
        </img>
    </details>
</body>
</html>

效果如下:

通过 <details> 可以实现暂停 gif 播放的效果.

关于 backdrop-filter

不同于 filter, backdrop-filter 是对当前元素背后的元素添加 filter 效果, 比如 A 元素的父级元素是 B, 在 A 元素使用 backdrop-filter 样式, 其实是影响 A 元素背后的 B 元素的视觉效果, 为了看到这个效果, A 元素至少要有一定的透明效果.

<html>
<head>
    <style>
        body {
            background-image: url('https://images.unsplash.com/photo-1505958891520-0c2f2950693f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
            background-size: contain;
            background-repeat: no-repeat;
            display: flex;
            font-size: 40px;
        }
        .div1 {
            width: 300px;
            height: 100vh;
            backdrop-filter: blur(10px);
            background-color: rbga(0, 0, 0, 0.1);
            margin-right: 10px;
            color: white;
        }
        .div2 {
            width: 300px;
            height: 100vh;
            backdrop-filter: grayscale(100%);
            background-color: rbga(0, 0, 0, 0.1);
            margin-right: 10px;
            color: white;
        }
        .div3 {
            width: 300px;
            height: 100vh;
            filter: blur(3px);
            margin-right: 10px;
            color: white;
        }
    </style>
</head>

<body>
    <div class="div1">科技微讯</div>
    <div class="div2">科技微讯</div>
    <div class="div3">科技微讯</div>
</body>
</html>

效果如下:

backdrop filter