background-blend-mode属性详解

2024-04-16 08:44

本文主要是介绍background-blend-mode属性详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

background-blend-mode属性详解

background-blend-mode 是CSS中的一个属性,用于控制一个元素的背景图层(如果有多个背景图像)如何与背景颜色或其下层内容混合在一起。这个属性允许您创建混合模式效果,就像在图像编辑软件(如Photoshop)中那样。
语法:

background-blend-mode: blend-mode[, blend-mode]*;

background-blend-mode 属于CSS background 相关属性,但它并不是 background 复合属性的一部分。background 是一个复合属性,它可以合并多个背景相关的子属性,如 background-color、background-image、background-repeat、background-position、background-size 等。
而 background-blend-mode 是独立于 background 的另一个属性,专门用于控制背景层间的混合模式。当你在CSS中设置多个背景图像或者背景颜色时,可以通过 background-blend-mode 来定义这些背景元素应该如何相互融合或叠加。

属性值描述
normal默认值。最终颜色永远是顶层颜色,无论底层颜色是什么。 其效果类似于两张不透明的纸重叠(overlapping)在一起。
multiply正片叠底模式,将底层颜色与上层颜色相乘,加深颜色,暗色会使结果更暗,亮色会使结果更亮。 其效果类似于在透明薄膜上重叠印刷的两个图像。
screen滤色模式,类似于反相的multiply,较亮的颜色会变得更亮,较暗的颜色则更接近透明。其效果类似于(被投影仪)投射到投影屏幕上的两个图像。
overlay叠加模式,根据底层颜色的明暗程度应用multiply或screen。如果底层颜色比顶层颜色深,则最终颜色是 multiply 的结果,如果底层颜色比顶层颜色浅,则最终颜色是 screen 的结果。此混合模式相当于顶层与底层互换后的 hard-light。
darken变暗模式,比较上下两层颜色,取每像素点中最暗的颜色。
lighten变亮模式,比较上下两层颜色,取每像素点中最亮的颜色。
color-dodge颜色减淡模式, 底层颜色变亮以反映上层颜色,亮色会让底层更亮,暗色不起作用。此混合模式类似于 screen,但是,前景只需要和背景的反色一样亮,最终图像就会变为全白。
color-burn饱和度模式, 底层颜色变暗以反映上层颜色,暗色会让底层更暗,亮色不起作用。此混合模式类似于 multiply,但是,前景只需要和背景的反色一样暗,最终图像就会变为全黑。
hard-light类似overlay,但根据上层颜色的明暗程度选择color-burn或color-dodge。 此混合模式相当于顶层与底层互换后的 overlay。其效果类似于在背景层上(用前景层)打出一片刺眼的聚光灯。
soft-light柔和版的hard-light,根据上层颜色的明暗改变底层颜色的对比度。其效果类似于在背景层上(用前景层)打出一片发散的聚光灯。
difference取两层颜色之差,产生高对比度黑白图像。
exclusion类似于difference,但产生的对比度较低,色彩偏暖。
hue只保留上层颜色的色相,饱和度和亮度取自底层。
saturation底层颜色的色相和亮度不变,饱和度取自上层。
color颜色模式。底层颜色的亮度不变,色相和饱和度取自上层。
luminosity亮度模式。底层颜色的色相和饱和度不变,亮度取自上层。

我们采用MDN的两张图片对比一下各个属性的效果:

.container {margin: 20px;width: 300px;height: 300px;background-image: url('https://c0d7348a-6c3e-4e21-a1de-420d70621ee6.mdnplay.dev/zh-CN/docs/Web/CSS/blend-mode/br.png'),url('https://c0d7348a-6c3e-4e21-a1de-420d70621ee6.mdnplay.dev/zh-CN/docs/Web/CSS/blend-mode/tr.png');
}
.container1 {background-blend-mode: multiply;
}
.container2 {background-blend-mode: screen;
}
.container3 {background-blend-mode: overlay;
}
.container4 {background-blend-mode: darken;
}
.container5 {background-blend-mode: lighten;
}
.container6 {background-blend-mode: color-dodge;
}
.container7 {background-blend-mode: color-burn;
}
.container8 {background-blend-mode: hard-light;
}
.container9 {background-blend-mode: soft-light;
}
.container10 {background-blend-mode: difference;
}
.container11 {background-blend-mode: exclusion;
}
.container12 {background-blend-mode: hue;
}
.container13 {background-blend-mode: saturation;
}
.container14 {background-blend-mode: color;
}
.container15 {background-blend-mode: luminosity;
}

效果如下:
在这里插入图片描述

注意,不仅适用于背景图像和背景颜色,还适用于多层背景图像之间以及背景与元素内容之间的混合。此外,此属性也可能影响元素的后代元素,除非后代元素明确设置了不同的混合模式。

参考文献

这篇关于background-blend-mode属性详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/908314

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更