css毛玻璃效果

作者: sunflower_07 | 来源:发表于2023-03-22 16:03 被阅读0次

炫酷的VS Code毛玻璃效果
css 毛玻璃效果
css图片毛玻璃效果
css 毛玻璃实现效果
css-毛玻璃效果
纯CSS 毛玻璃效果
用CSS实现高斯模糊效果：filter、backdrop-fil
web前端入门到实战：CSS3 filter（滤镜）属性
web前端入门到实战：CSS3 filter（滤镜）属性
CSS：遮罩效果、阴影效果、毛玻璃效果

backdrop-filter——毛玻璃效果

filter 与 backdrop-filter 的区别
filter：作用于元素本身
backdrop-filter：作用于元素背后区域所覆盖的元素

0.png

代码如下：



<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>高斯模糊效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       .app-container {
          display: flex;
          align-items: center;
        }
        .box {
          position: relative;
          width: 360px;
          height: 240px;
        }
        .image {
            width: 100%;
            height: 100%;
        }
        .mask, .mask_filter {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 240px;
            font-size: 48px;
            background-color: hsla(0, 0%, 100%, 0.8);
        }
        .mask {
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
          }
      .mask_filter {
        -webkit-filter: saturate(180%) blur(20px);
        filter: saturate(180%) blur(20px);
      }
</style>
</head>
<body>
     <div class="app-container">
    <div class="box">
      <div class="mask">Backdrop-Filter</div>
      <img class="image" 
           src="https://www.ssfiction.com/wp-content/uploads/2020/08/20200806_5f2b76af2cac8.jpg" 
        />
    </div>
    <div class="box">
      <div class="mask_filter">Filter</div>
      <img class="image" 
           src="https://www.ssfiction.com/wp-content/uploads/2020/08/20200806_5f2b76af2cac8.jpg" 
    />
    </div>
  </div>
</body>
</html>