css3实现高斯模糊

最新推荐文章于 2024-06-26 09:24:28 发布

原创最新推荐文章于 2024-06-26 09:24:28 发布 · 9.9k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #高斯模糊 #滤镜 #毛玻璃特效

html 同时被 2 个专栏收录

6 篇文章

订阅专栏

css3

4 篇文章

订阅专栏

css高斯模糊

1. 直接模糊

效果如下图：
在这里插入图片描述

代码：

模糊前：
<div id="bg0"></div>

模糊后：
<div id="bg"></div>

<style type="text/css">
  #bg0, #bg {
    width: 660px;
    height: 100px;
    background: url(1.png);
  }
  #bg {
    filter: blur(20px);
  }
</style>

2. 作为底图背景

如果我们直接写成下面的样子话会有问题

模糊前：
<div id="bg0">
  <span>hello</span>
</div>

模糊后：
<div id="bg">
  <span>hello</span>
</div>

<style type="text/css">
  #bg0, #bg {
    width: 660px;
    height: 100px;
    background: url(1.png);
  }
  #bg {
    filter: blur(20px);
  }
  span {
    background: green;
    color: #fff;
  }
</style>

事件上的样子是这样：
在这里插入图片描述

好吧，没办法看了。
都糊了，我们要搞这个遮罩才行。

我们改下：

模糊前：
<div id="bg0">
  <span>hello</span>
</div>

模糊后：
<div id="bg">
  <div id="cover"></div>
  <span>hello</span>
</div>

<style type="text/css">
  #bg0, #bg {
    width: 660px;
    height: 100px;
  }
  #bg0 {
    background: url(1.png);
  }
  #bg {
    position: relative;
  }
  #cover {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: url(1.png);
    filter: blur(20px);
  }
  span {
    position: relative;
    background: green;
    color: #fff;
  }
</style>

效果如下：
在这里插入图片描述

加个深色遮罩，

模糊前：
<div id="bg0">
  <span>hello</span>
</div>

模糊后：
<div id="bg">
  <div id="cover"></div>
  <span>hello</span>
</div>

<style type="text/css">
  #bg0, #bg {
    width: 660px;
    height: 100px;
  }
  #bg0 {
    background: url(1.png);
  }
  #bg {
    position: relative;
  }
  #cover {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background: url(1.png);
    filter: blur(20px);
  }
  span {
    position: relative;
    background: green;
    color: #fff;
  }
</style>