音画帖小白教程（完结）

花简静

凡哥 发表于 2024-8-8 13:20
各有各的用处

好哒，音画贴子里暂时不用就好。。

花简静

凡哥 发表于 2024-8-8 13:20
掌握了方法，语法糖比一个一个属性去设置简单的多

这到也是，写着也简洁

花简静

凡哥 发表于 2024-8-8 13:19
背景图像加不了透明度。透明度针对元素。或使用针对颜色的透明度，但这与背景图像无关。 ...

那个闪烁的星星的本来想说加个透明度的。那就死了这条心了。。

凡哥

花简静 发表于 2024-8-8 18:39
那个闪烁的星星的本来想说加个透明度的。那就死了这条心了。。

一切根据实际情况和应用需求

凡哥

花简静 发表于 2024-8-8 18:38
这到也是，写着也简洁

嗯呐

凡哥

花简静 发表于 2024-8-8 18:38
喝喝喝，这就安排上

正经话：坚持一段时间，若各方面有明显改善，就继续，若没有，那就算了，或许是你跟骆驼菇凉无缘

凡哥

第二十讲：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。

返回目录

花简静

凡哥 发表于 2024-8-9 07:36
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px ...

写程序的作业一开始吓一跳，
后来看到可以抄代码就觉得没那么吓人了。
写完后发现，好吧， 这个色相变换的见过且之前用得最多了。。

花简静

凡哥 发表于 2024-8-9 07:36
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px ...

滤镜原来有这么多，原来透明色相阴影这些都是同个归类，是一家人。
按我的熟悉程度：
透明滤镜，排第一
色相滤镜第二名
高斯模糊第三
阴影滤镜第四
其余比较面生。。
sepia()这个之前哪个贴子里有见过，原来它是一个单独列出来的滤镜。

花简静

这个滤镜系列太全面了。。越来越觉得老师这个教程的妙处。。