小白音画帖教程（完结）

马黑黑

绿叶清舟 发表于 2024-8-8 21:21
为什么手机看会有一块白的重叠呢

你手机的浏览器版本低下。你可以考虑安装一个浏览器，比如Edge

马黑黑

红影 发表于 2024-8-8 20:17
没人会专门写这个的

估计不会有

马黑黑

红影 发表于 2024-8-8 21:07
.hy2 {
        margin: auto;
        width: 600px;

背景大小的设置是值背景自身的大小，它不考虑图片的真实尺寸。所以，如果不想让图片变形，那么，必须考虑背景大小和图片实际尺寸的比例关系

红影

马黑黑 发表于 2024-8-8 21:25
背景大小的设置是值背景自身的大小，它不考虑图片的真实尺寸。所以，如果不想让图片变形，那么，必须考虑 ...

我特地把高度拉大点，不想有那么多，又想用重复，呵呵，我还是改成长宽一样的吧

马黑黑

红影 发表于 2024-8-8 20:53
background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第二张图片，lighten作用于第二张 ...

笔误，第一张、第二张，改过来了

红影

马黑黑 发表于 2024-8-8 21:23
估计不会有

这个如果认真去学习，会很有收获

红影

马黑黑 发表于 2024-8-8 22:17
笔误，第一张、第二张，改过来了

嗯嗯，其实后面也有说到这个，看后面的也能清楚

马黑黑

红影 发表于 2024-8-8 23:19
嗯嗯，其实后面也有说到这个，看后面的也能清楚

最近写的教程多，有工作上的，有副业方面的，外加这里的，还得加班捡瓶子，东西写好多数都没仔细推敲

马黑黑

第二十讲：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:46
最近写的教程多，有工作上的，有副业方面的，外加这里的，还得加班捡瓶子，东西写好多数都没仔细推敲

黑黑辛苦了，期盼悟完子弟回来玩，这里还是比较悠闲自在的

红影

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

这个好，把十种滤镜全变成可演示的方式，让人能直观看到各种数值下的滤镜表现

红影

明亮度和对比度全拉到0时，它们的显示结果也是不一样的呢。

红影

灰度滤镜也有趣，拉到100%可知，绿色看着最浅，而蓝色最深。

红影

一个个拉动拉杆，感受着各种滤镜变化，这个太好了

马黑黑

红影 发表于 2024-8-9 16:02
明亮度和对比度全拉到0时，它们的显示结果也是不一样的呢。

不一样。如果感觉一样，不是眼睛问题，就是显示设备问题，抑或你粗心了

红影

马黑黑 发表于 2024-8-9 18:27
不一样。如果感觉一样，不是眼睛问题，就是显示设备问题，抑或你粗心了

是啊，试一下得到的感觉更真切

红影

filter: hue-rotate(0deg);

红影

也不知道作业是不是理解错了

马黑黑

红影 发表于 2024-8-9 21:39
#hy { position: relative;
        margin: auto;
        width: 800px;

效果达到要求，但是，并不是直接更改视频色相，而是改了视频父元素的色相、再由父元素对子元素的影响产生的色相改变。

应给视频元素一个 id，然后，下面这一句，红色的元素标识改用视频标签的id：

hy.style.filter = 'hue-rotate(' + hh.value + 'deg)';

马黑黑

红影 发表于 2024-8-9 21:45
也不知道作业是不是理解错了

效果可以，但不符合题意要求