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

相关文章

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片,如艺术画作、设计素材、报告图表等,提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

C#数据结构之字符串(string)详解

《C#数据结构之字符串(string)详解》:本文主要介绍C#数据结构之字符串(string),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录转义字符序列字符串的创建字符串的声明null字符串与空字符串重复单字符字符串的构造字符串的属性和常用方法属性常用方法总结摘

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML