【黑师音画帖小白教程】第二十讲：CSS filter滤镜

位置: 首页 > 马黑教程[ 发布时间: 2024.8.9 作者: 马黑黑阅读: 122 ]

第二十讲：CSS filter滤镜

CSS 的 filter 属性属于元素的滤镜范畴，通过该属性给元素指定特定的单一滤镜或组合滤镜，用以修饰元素，特别地，用于调整元素或元素的图像、背景和边框等。所有的滤镜都是CSS函数，本讲以举例的方式演示各个滤镜函数的表现。

一、模糊滤镜 blur()

<style>
#fbox1 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: blur(0px); /* 高斯模糊，实体单位尺寸，默认值0，值越大模糊度越高 */
}

</style>

<div id="fbox1">blur滤镜</div>
<p class="textMid"><output id="o1">filter: blur(0px);</output></p>
<p class="textMid"><input id="f1" type="range" min="0" max="100" value="0" /></p>

<script>
f1.oninput = () => {
	o1.value = 'filter: blur(' + f1.value + 'px);';
	fbox1.style.filter = 'blur(' + f1.value + 'px)';
};
</script>

二、明度滤镜 brightness()

<style>
#fbox2 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: brightness(100%); /* 明亮度滤镜，默认值 100%，高于或低于此值表示降低或提升明亮度 */
}

</style>

<div id="fbox2">brightness滤镜</div>
<p class="textMid"><output id="o2">filter: brightness(100%);</output></p>
<p class="textMid"><input id="f2" type="range" min="0" max="200" value="100" /></p>

<script>
f2.oninput = () => {
	o2.value = 'filter: brightness(' + f2.value + '%);';
	fbox2.style.filter = 'brightness(' + f2.value + '%)';
};
</script>

三、对比度滤镜 contrast()

<style>
#fbox3 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: contrast(100%); /* 对比度滤镜，默认值 100%，高于或低于此值表示降低或提升对比度 */
}

</style>

<div id="fbox3">contrast滤镜</div>
<p class="textMid"><output id="o3">filter: contrast(100%);</output></p>
<p class="textMid"><input id="f3" type="range" min="0" max="200" value="100" /></p>

<script>
f3.oninput = () => {
	o3.value = 'filter: contrast(' + f3.value + '%);';
	fbox3.style.filter = 'contrast(' + f3.value + '%)';
};
</script>

四、阴影滤镜 drop-shadow()

<style>
#fbox4 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: drop-shadow(10px 10px 20px purple); /* 阴影滤镜 ：X偏移量 + Y偏移量 + 模糊半径 + 颜色，XY偏移量支持负数 */
}

</style>

<div id="fbox4">drop-shadow滤镜</div>

五、灰度滤镜 grayscale()

<style>
#fbox5 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: grayscale(0%); /* 灰度滤镜，默认值0，最大值100% */
}

</style>

<div id="fbox5">grayscale滤镜</div>
<p class="textMid"><output id="o5">filter: grayscale(0%);</output></p>
<p class="textMid"><input id="f5" type="range" min="0" max="100" value="0" /></p>

<script>
f5.oninput = () => {
	o5.value = 'filter: grayscale(' + f5.value + '%);';
	fbox5.style.filter = 'grayscale(' + f5.value + '%)';
};
</script>

六、色相转换滤镜 hue-rotate()

<style>
#fbox6 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: hue-rotate(0deg); /* 在0~360度之间转换色相，值为0或360度时图像不改变 */
}

</style>

<div id="fbox6">hue-rotate滤镜</div>
<p class="textMid"><output id="o6">filter: hue-rotate(0deg);</output></p>
<p class="textMid"><input id="f6" type="range" min="0" max="360" value="0" /></p>

<script>
f6.oninput = () => {
	o6.value = 'filter: hue-rotate(' + f6.value + 'deg);';
	fbox6.style.filter = 'hue-rotate(' + f6.value + 'deg)';
};
</script>

七、图像反转滤镜 invert()

<style>
#fbox7 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: invert(0%); /* 在0%~100%之间反转图像颜色，值为0时图像不变 */
}

</style>

<div id="fbox7">invert滤镜</div>
<p class="textMid"><output id="o7">filter: invert(0%);</output></p>
<p class="textMid"><input id="f7" type="range" min="0" max="100" value="0" /></p>

<script>
f7.oninput = () => {
	o7.value = 'filter: invert(' + f7.value + '%);';
	fbox7.style.filter = 'invert(' + f7.value + '%)';
};
</script>

八、透明滤镜 opacity()

<style>
#fbox8 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: opacity(100%); /* 在0%~100%之间设置透明度，与 opacity 属性功能一样 */
}

</style>

<div id="fbox8">opacity滤镜</div>
<p class="textMid"><output id="o8">filter: opacity(100%);</output></p>
<p class="textMid"><input id="f8" type="range" min="0" max="100" value="100" /></p>

<script>
f8.oninput = () => {
	o8.value = 'filter: opacity(' + f8.value + '%);';
	fbox8.style.filter = 'opacity(' + f8.value + '%)';
};
</script>

九、饱和度滤镜 saturate()

<style>
#fbox9 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: saturate(100%); /* 饱和度滤镜，100%时饱和度正常，低于或高于100%降低或提升饱和度 */
}

</style>

<div id="fbox9">saturate滤镜</div>
<p class="textMid"><output id="o9">filter: saturate(100%);</output></p>
<p class="textMid"><input id="f9" type="range" min="0" max="200" value="100" /></p>

<script>
f9.oninput = () => {
	o9.value = 'filter: saturate(' + f9.value + '%);';
	fbox9.style.filter = 'saturate(' + f9.value + '%)';
};
</script>

十、深褐色滤镜 sepia()

<style>
#fbox10 {
	margin: auto;
	width: 300px;
	height: 300px;
	background: url('https://638183.freep.cn/638183/small/ball_rgb.png');
	filter: sepia(0%); /* 在0%~100%之间转换图像为深褐色，值为0是图像不改变，100%时完全深褐色 */
}

</style>

<div id="fbox10">sepia滤镜</div>
<p class="textMid"><output id="o10">filter: sepia(0%);</output></p>
<p class="textMid"><input id="f10" type="range" min="0" max="100" value="0" /></p>

<script>
f10.oninput = () => {
	o10.value = 'filter: sepia(' + f10.value + '%);';
	fbox10.style.filter = 'sepia(' + f10.value + '%)';
};
</script>

filter属性的子滤镜主要就这些，当然还有 none，无滤镜，unset，重置，等等。另外，filter属性可以带多个子滤镜，各滤镜之间用空格隔开，例如：filter: opacity(50%) blur(2px);，是否需要多滤镜、如何选择多滤镜根据需要而定。

作业：参照示例六色相转换滤镜的代码做一个可以调节视频色相并显示当前滤镜值的程序。提示：使用video标签播放视频，在CSS代码中设置一个视频id选择器并设置好宽高尺寸、filter属性（0deg），video标签的HTML代码里设置好id、自动播放、重复播放，output标签和input标签可以照抄示例代码但应更改对应的id并在JS代码中使用相同的id。

返回目录

前一篇: 【黑师音画帖小白教程】第十九讲：颜色融合模式 *-blend-mode 和多背景图像的处理
下一篇: 【黑师音画帖小白教程】第二十一讲：学一点点JS（一）变量

发表评论:

评论列表 [1条]

#1 | 飞飞于 2024-8-9 14:50 发布: 白老师来瞧瞧，我翻看你改过的讲义，对比后发现似乎依然是斜杠问题。。试着改了一下下，好象是正常喽