CSS模糊

Safari浏览器首页的模糊效果如何做

分析

上层box将其下的所有元素都进行了模糊，但是自身元素并没有模糊，这时候使用filter就比较难实现了，因为filter是将自身的所有元素进行了模糊，对下层元素并没有影响，可以使用backdrop-filter，这个属性可以将自身遮挡区域下的元素进行模糊，配合半透明背景rgba就可以比较容易的实现这种效果

代码

• HTML

<div className='box' >
</div>

• css

.box {
    width: 100vw;
    height: 100vh;
    background: url('./public/1.jpg') no-repeat;
    background-size: cover;
}

.box::after {
    content: '过去7天，Safari浏览器阻止了...';
    display: block;
    width: 70%;
    height: 65px;
    line-height: 65px;
    text-indent: 2em;
    margin: auto;
    transform: translateY(50vh);
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
    background-color: rgba(255,255,255,.4);
    // 关键属性
    backdrop-filter: blur(15px);
}

实现效果

• 低配版，位置尺寸啥的不是完全复制，但意思就是这么个意思