CSS利用高斯模糊实现背景虚拟化

最新推荐文章于 2024-04-18 13:55:23 发布

扶苏1002

最新推荐文章于 2024-04-18 13:55:23 发布

阅读量734

点赞数 3

分类专栏： CSS实战文章标签： css 前端高斯模糊背景虚拟

本文链接：https://blog.csdn.net/qq_44741577/article/details/136267842

版权

CSS实战专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS的filter:blur()属性创建高斯模糊效果，以及如何通过overflow:hidden和transform:scale()属性来防止扩散并解决白边问题。在father类中，bg子元素应用了这些技巧。

摘要由CSDN通过智能技术生成

以图片①为背景虚拟成为②

CSS使用filter: blur(20px);实现高斯模糊效果，周边会出现扩展的白边；
overflow: hidden; 防止高斯模糊引起的扩散
transform: scale(1.5);解决因为高斯模糊引起的白边
注意： 元素被高斯模糊以后，其所有的子元素都会被模糊

.father {
    position: relative;
    // 防止高斯模糊引起的扩散
    overflow: hidden;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      -webkit-filter: blur(20px);
      // css高斯模糊
      filter: blur(20px);
      -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
      // 解决因为高斯模糊引起的白边
      transform: scale(1.5);
    }
  }