《太极》贴子说明
本帖:演示多重背景的应用 + 伪元素做播放器
帖子容器选择器 #mydiv 使用了三个背景图像:外国姑凉,太极剑名家表演,太阳仙鹤,外加一个 rgba 颜色用于提升颜色融合的表现力。
背景图像有叠加现象时,代码中最先出现的背景图像设置处于最上层,后出现的在其下,存在色彩覆盖情况。因此,处理方法之一是背景图像融合,本帖采用此法。
background-blend-mode 属性支持设置多个图像的融合滤镜,各滤镜对应代码中按顺序出现的背景图像,滤镜值之间有小角逗号隔开。滤镜有一个补全规则:滤镜数少于背景图像数时,从头循环滤镜。举例说明:多背景图像只设置一个滤镜,则所有的图像使用相同的滤镜;若有甲乙丙丁四个图像背景但只有三个滤镜值ABC,那么,甲乙丙使用ABC滤镜,丁使用A滤镜。
帖子容器的两个伪元素做小播使用已经不止一次,因最近的小白音画帖讲义介绍到了伪元素,所以顺势做一个演示。这个需要帖子容器选择器和其伪元素选择器的一些配套:pointer-events(设备指针事件) 属性设置为 none,这样帖子容器不接受点击操作;伪元素 pointer-events 属性设置为 auto,这样,伪元素接受设备指针点击交互。
帖子容器选择器 #mydiv 使用了三个背景图像:外国姑凉,太极剑名家表演,太阳仙鹤,外加一个 rgba 颜色用于提升颜色融合的表现力。
背景图像有叠加现象时,代码中最先出现的背景图像设置处于最上层,后出现的在其下,存在色彩覆盖情况。因此,处理方法之一是背景图像融合,本帖采用此法。
background-blend-mode 属性支持设置多个图像的融合滤镜,各滤镜对应代码中按顺序出现的背景图像,滤镜值之间有小角逗号隔开。滤镜有一个补全规则:滤镜数少于背景图像数时,从头循环滤镜。举例说明:多背景图像只设置一个滤镜,则所有的图像使用相同的滤镜;若有甲乙丙丁四个图像背景但只有三个滤镜值ABC,那么,甲乙丙使用ABC滤镜,丁使用A滤镜。
帖子容器的两个伪元素做小播使用已经不止一次,因最近的小白音画帖讲义介绍到了伪元素,所以顺势做一个演示。这个需要帖子容器选择器和其伪元素选择器的一些配套:pointer-events(设备指针事件) 属性设置为 none,这样帖子容器不接受点击操作;伪元素 pointer-events 属性设置为 auto,这样,伪元素接受设备指针点击交互。
前一篇: 《T台人生》贴子说明
下一篇: 没有了
发表评论:
评论列表 [0条]