太极

凡哥

凡哥

本帖：演示多重背景的应用 + 伪元素做播放器

帖子容器选择器 #mydiv 使用了三个背景图像：外国姑凉，太极剑名家表演，太阳仙鹤，外加一个 rgba 颜色用于提升颜色融合的表现力。

背景图像有叠加现象时，代码中最先出现的背景图像设置处于最上层，后出现的在其下，存在色彩覆盖情况。因此，处理方法之一是背景图像融合，本帖采用此法。

background-blend-mode 属性支持设置多个图像的融合滤镜，各滤镜对应代码中按顺序出现的背景图像，滤镜值之间有小角逗号隔开。滤镜有一个补全规则：滤镜数少于背景图像数时，从头循环滤镜。举例说明：多背景图像只设置一个滤镜，则所有的图像使用相同的滤镜；若有甲乙丙丁四个图像背景但只有三个滤镜值ABC，那么，甲乙丙使用ABC滤镜，丁使用A滤镜。

帖子容器的两个伪元素做小播使用已经不止一次，因最近的小白音画帖讲义介绍到了伪元素，所以顺势做一个演示。这个需要帖子容器选择器和其伪元素选择器的一些配套：pointer-events（设备指针事件） 属性设置为 none，这样帖子容器不接受点击操作；伪元素 pointer-events 属性设置为 auto，这样，伪元素接受设备指针点击交互。

帖子代码(246楼）：http://43.159.199.78/forum.php?m ... 2691&pid=508674

花简静

凡哥 发表于 2024-8-7 08:12
本帖：演示多重背景的应用 + 伪元素做播放器

帖子容器选择器 #mydiv 使用了三个背景图像：外国姑凉，太极 ...

好细致的说明，滤镜融合内容有好多讲究。。搬走了

花简静

仔细看看这个结构。。
三张背景图片，用滤镜融合在一起。。飞鹤，外国人，太极人。
顺序是变暗，正常，变暗。。。
还有一个背景色rgba(0,128,128,.25);有点青的颜色，透明度25..

花简静

伪元素整出两个太极小播，转动时有一种神秘的力量。。。
周围有光晕，鼠标触碰光晕会变色。。

花简静

音乐轻柔，非常好听

清梦

欣赏凡哥老师精彩作品

清梦

问好凡哥老师感谢你的精彩

清梦

祝老师创作愉快，七夕快乐

碧海

欣赏凡哥老师精彩制作