CSS滤镜介绍

马黑黑

滤镜	语法	参数	说明
高斯模糊	blur()	px	值越大模糊度越高
亮度	brightness()	x%	默认值100%。0%无亮度，>=100%为更亮
对比度	contrast()	x%	默认值100%，0%全黑，>=100%对比度更高
阴影	drop-shadow()	h v blur spread color	水平+垂直+模糊+扩散+颜色
灰度	grayscale()	x%	默认值0%，100%变成黑白
色相旋转	hue-rotate()	xdeg	默认值0deg，最大值360deg
颜色反转	invert()	x%	默认值0%，最大值100%
不透明度	opacity()	x%	默认值100%, 0%完全透明
饱和度	saturate()	x%	默认值100%，0%完全不饱和
棕褐色	sepia()	x%	默认值0%，100%完全变为棕褐色

马黑黑

【说明】下列图片均使用了滤镜，鼠标滑过相应图片，图片恢复默认值并弹出鼠标滑过前的滤镜值。代码在后面的回复中给出：

马黑黑

上楼参考代码：

<style>

#filterBox { width: 760px; display: flex; flex-wrap: wrap; }
#filterBox img { margin: 10px; width: 360px; height: 360px; }
#filterBox img:hover { filter: initial; } /* 鼠标滑过返回滤镜默认值：原图样式 */
.pblur { filter: blur(2px); } /* 高斯模糊 */
.pbrightness { filter: brightness(120%); } /* 亮度调整*/
.pcontrast { filter: contrast(120%); } /* 对比度*/
.pgrayscale { filter: grayscale(100%); } /* 灰度 */
.phue-rotate { filter: hue-rotate(180deg); } /* 色相旋转 单位有角度deg*/
.pinvert { filter: invert(100); } /* 颜色反转*/
.popacity { filter: opacity(50%); } /* 不透明度 */
.psaturate { filter: saturate(50%); } /* 饱和度 */
.psepia { filter: sepia(50%); } /* 棕褐色*/
.pdrop-shadow { filter: drop-shadow(2px 2px 4px #111); }

</style>

<div id="filterBox">
        <img class="pblur" alt="" title=" blur(2px) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="pbrightness" alt="" title=" brightness(120%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="pcontrast" alt="" title=" contrast(120%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="pdrop-shadow" alt="" title=" drop-shadow(2px 2px 4px #111)" src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="pgrayscale" alt="" title=" grayscale(100%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="phue-rotate" alt="" title=" hue-rotate(180deg) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="pinvert" alt="" title=" invert(100) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="popacity" alt="" title=" opacity(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="psaturate" alt="" title=" saturate(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
        <img class="psepia" alt="" title=" sepia(50%) " src="/data/attachment/forum/202203/15/222911undodead3gdsy3ye.jpg" />
</div>

马黑黑

CSS滤镜主要用于图片修饰，但也可以作用于其他可视元素及其元素所包含的内容（我们此前曾用来演示过文本效果）

红影

滤镜里有这么多变化的呢

红影

阴影和不透明度比较熟悉，其他的不熟。

马黑黑

融合现象：

马黑黑

融合现象加入动画：

马黑黑

7楼参考代码：
<style>
.papaBox {
        margin: 0 auto 10px;
        width: 400px;
        height: 200px;
        background: #fff;
        overflow: hidden;
        position: relative;
        filter: contrast(20);
}
.papaBox div {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        filter: blur(6px);
}
#ball1{
        background: blue;
        left: 0;
}
#ball2 {
        background-color: red;
        left:80px;
}
</style>

<div id="papaBox">
        <div id="ball1"></div>
        <div id="ball2"></div>   
</div>

马黑黑

8楼参考代码：

<style>
.papa {
        width: 400px;
        height: 200px;
        background: #fff;
        overflow: hidden;
        padding: 10px;
        position: relative;
        filter: contrast(20);
}
.papa div {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        filter: blur(6px);
}
.ball1{
        background: black;
        left: 0;
        animation: move 2s infinite alternate;
}
.ball2 {
        background-color: red;
        left:120px;
}
@keyframes move{ 100%{ left:250px; } }
</style>

<div class="papa">
        <div class="ball1"></div>
        <div class="ball2"></div>   
</div>

马黑黑

红影 发表于 2022-3-15 22:57
阴影和不透明度比较熟悉，其他的不熟。

常用的滤镜基本就这些了

红影

马黑黑 发表于 2022-3-15 23:09
8楼参考代码：

这个融合也很好看呢

红影

马黑黑 发表于 2022-3-15 23:09
常用的滤镜基本就这些了

黑黑介绍得很详细

马黑黑

红影 发表于 2022-3-16 12:53
黑黑介绍得很详细

已经简化了

马黑黑

红影 发表于 2022-3-16 12:53
这个融合也很好看呢

没想到的

红影

马黑黑 发表于 2022-3-16 12:53
已经简化了

这么多，还是简化版的啊。

红影

马黑黑 发表于 2022-3-16 12:53
没想到的

非常有趣，又可以用来做帖子了

马黑黑

红影 发表于 2022-3-16 13:31
这么多，还是简化版的啊。

我最近也有点懒了，说明部分极其简洁的

马黑黑

红影 发表于 2022-3-16 13:32
非常有趣，又可以用来做帖子了

小辣椒咋不见人呢？她见这个肯定心动。

红影

马黑黑 发表于 2022-3-16 13:32
我最近也有点懒了，说明部分极其简洁的

已经很不容易了，黑黑辛苦