CSS滤镜的开始：透明与高斯模糊
本帖最后由 马黑黑 于 2022-3-14 21:24 编辑 <br /><br /><p>CSS怎么能少了滤镜？之前，我们的CSS相关演示里，用过 opacity 和 rgba() 属性方法，它们就是滤镜，前者，opacity，是从滤镜中分离出来的属性，已经独立存在，后者，rgba() 方法，其实就是RGB颜色体系里的东东，加了一个a，alpha通道的意思。<br><br></p><p>除了以上这些，CSS还保留有自己的滤镜，比如，filter：<br><br></p>
<p>filter: 滤镜(参数);<br><br></p>
<p>filter滤镜拥有多个滤镜“镜头”，今天我们只讲高斯模糊 blur，blur的参数是数值加单位：</p><p><br></p><p><font color="#ff0000">filter</font>:<font color="#006400"> blur(</font><font color="#0000ff">4px</font><font color="#006400">)</font>;</p><p><br></p><p>值越大，模糊度越高。filter的blur滤镜仅作用于所使用的元素即当前元素。</p><p><br></p><p>而 backdrop-filter 滤镜则作用于所使用的元素即当前元素及其背后所有的元素，其“镜头”与镜头参数与 filter 一模一样：</p><p><br></p><p><font color="#ff0000">backdrop-filter</font>:<font color="#006400"> blur(</font><font color="#0000ff">4px</font><font color="#006400">)</font>;</p><p><br></p><p>下面给出一组实例代码：</p><p><br></p><p><style type="text/css"></p><p>#papa {</p><p><span style="white-space:pre"> </span>margin: auto;</p><p><span style="white-space:pre"> </span>width: 760px;</p><p><span style="white-space:pre"> </span>height: 420px;</p><p><span style="white-space:pre"> </span>background: #000 url('/data/attachment/forum/202203/14/204611csns6tv6pzu2tpsa.jpg') no-repeat center/cover;</p><p><span style="white-space:pre"> </span>display: flex;</p><p><span style="white-space:pre"> </span>justify-content: center;</p><p><span style="white-space:pre"> </span>align-items: center;</p><p>}</p><p>#papa div {</p><p><span style="white-space:pre"> </span>margin : 0 10px;</p><p><span style="white-space:pre"> </span>padding: 10px;</p><p><span style="white-space:pre"> </span>width: 200px;</p><p><span style="white-space:pre"> </span>height: 220px;</p><p><span style="white-space:pre"> </span>border: 1px solid #000;</p><p><span style="white-space:pre"> </span>font-family: '微软雅黑', '黑体';</p><p><span style="white-space:pre"> </span>font-weight: bold;</p><p><span style="white-space:pre"> </span>font-size: 16px;</p><p><span style="white-space:pre"> </span>color: darkblue;</p><p><span style="white-space:pre"> </span>opacity: .8;</p><p><span style="white-space:pre"> </span>text-shadow: 1px 1px 2px #000;</p><p>}</p><p>#papa div:hover { opacity: 1; filter: blur(0); backdrop-filter: blur(0); }</p><p>.p-normal { }</p><p>.p-filter { filter: blur(5px); }</p><p>.p-backdropFilter { backdrop-filter: blur(5px); }</p><p><br></p><p></style></p><p><br></p><p><div id="papa"></p><p><span style="white-space:pre"> </span><div class="p-normal">滤镜：透明<br><br>opacity: 0.8;<br><br>opacity也是滤镜，不透明滤镜，为1时完全不透明</div></p><p><span style="white-space:pre"> </span><div class="p-filter">滤镜：透明+模糊<br><br>opacity: 0.8;<br>filter: blur(5px);<br><br>filter滤镜仅作用于元素自身</div></p><p><span style="white-space:pre"> </span><div class="p-backdropFilter">滤镜：透明+模糊<br><br>opacity: 0.8;<br>backdrop-filter: blur(5px);<br><br>毛玻璃效果。backdrop-filter滤镜作用于自身和其下所有元素，不支持Firefox和IE。</div></p><p></div></p><p><br></p><p>以下是上面代码的效果，为查看说明，请将鼠标指针依次移动到子元素上方，这将回复无滤镜的状况：</p><p><br></p><p><br></p><p><br></p>
<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-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好像用的比较多，filter第一次接触。 用backdrop-filter的时候，同样的设置，因为自身和其下所有元素都模糊了，效果很奇特。 原来css可以完成PS里面的各种效果{:4_178:} 小辣椒 发表于 2022-3-14 22:24
原来css可以完成PS里面的各种效果
没有PS那么强大
页:
[1]