CSS滤镜的开始：透明与高斯模糊

马黑黑

CSS怎么能少了滤镜？之前，我们的CSS相关演示里，用过 opacity 和 rgba() 属性方法，它们就是滤镜，前者，opacity，是从滤镜中分离出来的属性，已经独立存在，后者，rgba() 方法，其实就是RGB颜色体系里的东东，加了一个a，alpha通道的意思。

除了以上这些，CSS还保留有自己的滤镜，比如，filter：

filter: 滤镜(参数);

filter滤镜拥有多个滤镜“镜头”，今天我们只讲高斯模糊 blur，blur的参数是数值加单位：

filter: blur(4px);

值越大，模糊度越高。filter的blur滤镜仅作用于所使用的元素即当前元素。

而 backdrop-filter 滤镜则作用于所使用的元素即当前元素及其背后所有的元素，其“镜头”与镜头参数与 filter 一模一样：

backdrop-filter: blur(4px);

下面给出一组实例代码：

<style type="text/css">

#papa {

margin: auto;

width: 760px;

height: 420px;

background: #000 url('/data/attachment/forum/202203/14/204611csns6tv6pzu2tpsa.jpg') no-repeat center/cover;

display: flex;

justify-content: center;

align-items: center;

}

#papa div {

margin : 0 10px;

padding: 10px;

width: 200px;

height: 220px;

border: 1px solid #000;

font-family: '微软雅黑', '黑体';

font-weight: bold;

font-size: 16px;

color: darkblue;

opacity: .8;

text-shadow: 1px 1px 2px #000;

}

#papa div:hover { opacity: 1; filter: blur(0);  backdrop-filter: blur(0); }

.p-normal {  }

.p-filter { filter: blur(5px); }

.p-backdropFilter { backdrop-filter: blur(5px); }

</style>

<div id="papa">

<div class="p-normal">滤镜：透明<br><br>opacity: 0.8;<br><br>opacity也是滤镜，不透明滤镜，为1时完全不透明</div>

<div class="p-filter">滤镜：透明+模糊<br><br>opacity: 0.8;<br>filter: blur(5px);<br><br>filter滤镜仅作用于元素自身</div>

<div class="p-backdropFilter">滤镜：透明+模糊<br><br>opacity: 0.8;<br>backdrop-filter: blur(5px);<br><br>毛玻璃效果。backdrop-filter滤镜作用于自身和其下所有元素，不支持Firefox和IE。</div>

</div>

以下是上面代码的效果，为查看说明，请将鼠标指针依次移动到子元素上方，这将回复无滤镜的状况：

滤镜：透明

opacity: 0.8;

opacity也是滤镜，不透明滤镜，为1时完全不透明

滤镜：透明+模糊

opacity: 0.8;
filter: blur(5px);

filter滤镜仅作用于元素自身

滤镜：透明+模糊

opacity: 0.8;
backdrop-filter: blur(5px);

毛玻璃效果。backdrop-filter滤镜作用于自身和其下所有元素，不支持Firefox和IE。

红影

opacity好像用的比较多，filter第一次接触。

红影

用backdrop-filter的时候，同样的设置，因为自身和其下所有元素都模糊了，效果很奇特。

小辣椒

原来css可以完成PS里面的各种效果

马黑黑

小辣椒 发表于 2022-3-14 22:24
原来css可以完成PS里面的各种效果

没有PS那么强大