CSS3 -- mix-blend-mode属性详解

一:简介

在上篇文章中,我们利用css的mix-blend-mode属性做了一个简单的文字颜色自适应背景颜色的效果,这篇文章我来解释一下这个属性的用法以及一些简单的案例。


二:介绍

mix-blend-mode 是一种 CSS 属性,它定义了一个元素的颜色如何与其父元素的颜色以及兄弟元素的颜色混合。它允许您创建令人惊艳的视觉效果,可以用于创建半透明效果、添加阴影、制作图片蒙版和很多其他效果。


具体来说,mix-blend-mode 定义了两个元素之间的颜色混合模式。该属性接受许多不同的值,接下来我会逐个介绍。


normal

默认值。使用正常的颜色混合模式。

multiply

将两个颜色的值相乘,得到一个更暗的颜色。这通常用于创建阴影效果。

screen

将两个颜色的值相加,然后减去相乘的值,得到一个更亮的颜色。这通常用于创建高光效果。

overlay

根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗,则使用 multiply 模式;如果背景颜色较亮,则使用 screen 模式。

darken

将两个颜色的值比较,使用较暗的那个颜色。

lighten

将两个颜色的值比较,使用较亮的那个颜色。

color-dodge

将前景色分解为 RGB 分量,并将每个分量分别除以(1 减去背景色的对应分量)。然后将每个分量限制在 0 到 1 之间,并使用限制后的前景色作为混合色。

color-burn

将前景色分解为 RGB 分量,并将每个分量分别除以背景色的对应分量。然后将每个分量限制在 0 到 1 之间,并使用限制后的前景色作为混合色。

difference

将前景色减去背景色的值,并取绝对值。这会导致一个反相的效果。

exclusion

将前景色和背景色的值相加,然后减去相乘的值的两倍。这通常用于创建反相效果。

hue

将前景色的色相(Hue)与背景色的饱和度(Saturation)和亮度(Lightness)混合。这可以用于在不改变亮度和饱和度的情况下改变颜色。

saturation

将前景色的饱和度与背景色的色相和亮度混合。这可以用于在不改变颜色的情况下改变饱和度。

color

将前景色的色相、饱和度和亮度与背景色混合。这可以用于在改变所有颜色属性的情况下改变前景色的颜色。

luminosity

将前景色的亮度与背景色的色相和饱和度混合。这可以用于在不改变颜色的情况下改变亮度。

mix-blend-mode

属性可以应用于任何具有背景颜色或背景图像的元素,包括文本、图像和 SVG 图形。通常情况下,您会将 mix-blend-mode 应用于子元素,使其与父元素或其他兄弟元素混合。

三:注意

在混合模式中,元素的颜色值可以是任何一种表示颜色的方式,包括十六进制值、RGB值、RGBA值等。当进行混合计算时,CSS会将两个元素的颜色值转换成标准的RGBA表示方式,并根据混合模式算法对这两个颜色值进行计算,最终生成一个新的RGBA颜色值。

混合模式中的算法涉及到了数学计算,不同的算法使用不同的计算公式。以 multiply 算法为例,它的计算公式是将两个颜色值的每个通道(即红、绿、蓝、透明度四个通道)分别相乘,得到新的颜色值的每个通道。


rgb(255,255,0)与一个rgb(0,255,0)相加

两个颜色值相加通常是通过混合模式中的color算法实现的。这个算法将两个颜色值的每个通道(即红、绿、蓝三个通道)进行相加,然后将结果截取到最大值255以内,得到新的颜色值的每个通道。如果通道相加的结果超过了255,则将结果截取到255。因为每个通道的值都在0-255之间,所以相加的结果也应该在这个范围内。

因此,将rgb(255, 255, 0)与rgb(0, 255, 0)相加的结果为rgb(255, 255, 0),因为红色通道相加为255,绿色通道相加为255,蓝色通道相加为0,符合上述算法。


rgb(255,255,0)与一个rgb(0,255,0)相乘

两个颜色值相乘通常是通过混合模式中的multiply算法实现的。这个算法将两个颜色值的每个通道(即红、绿、蓝三个通道)进行相乘,然后将结果除以255,得到新的颜色值的每个通道。如果通道相乘的结果超过了255,则将结果除以255后截取到1以内。

因此,将rgb(255, 255, 0)与rgb(0, 255, 0)相乘的结果为rgb(0, 255, 0),因为红色通道相乘为0,绿色通道相乘为255,蓝色通道相乘为0,符合上述算法。


四:案例

以下用几个简单的例子来用一下比较常用的属性值


1. mix-blend-mode: multiply;

此属性值会将两个图层的颜色值相乘,产生一种暗色调的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #000000;\n mix-blend-mode: multiply;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和颜色会与子元素的背景图进行相乘,产生一种暗色调的效果。


2. mix-blend-mode: screen;

此属性值会将两个图层的颜色值进行屏幕混合,产生一种亮色调的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #ffffff;\n mix-blend-mode: screen;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和颜色会与子元素的背景图进行屏幕混合,产生一种亮色调的效果。


3.mix-blend-mode: overlay;

此属性值会将两个图层进行叠加混合,产生一种高亮度的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n background-color: #ffffff;\n mix-blend-mode: overlay;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和颜色会与子元素的背景图进行叠加混合,产生一种高亮度的效果。


4.mix-blend-mode: difference;

此属性值会将两个图层的颜色值进行差值计算,产生一种反色效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: difference;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和子元素的背景图进行差值计算,产生一种反色效果。


5.mix-blend-mode: hue;

此属性值会将两个图层的色相进行混合,产生一种颜色平衡的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: hue;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和子元素的背景图进行色相混合,产生一种颜色平衡的效果。


6.mix-blend-mode: luminosity;

此属性值会将两个图层的亮度进行混合,产生一种亮度平衡的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: luminosity;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和子元素的背景图进行亮度混合,产生一种亮度平衡的效果。


7.mix-blend-mode: color-dodge;

此属性值会将两个图层的颜色值进行颜色减淡计算,产生一种颜色亮度较高的效果。以下是一个简单的例子:

.parent {\n background-image: url(\'background-image.jpg\');\n mix-blend-mode: color-dodge;\n}\n\n.child {\n background-image: url(\'foreground-image.png\');\n}\n

这个例子中,父元素的背景图和子元素的背景图进行颜色减淡计算,产生一种颜色亮度较高的效果。

参考:CSS3 -- mix-blend-mode属性详解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/43769.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 Spring Boot 中使用 OpenAI ChatGPT API

1、开始咯 我们来看看如何在 Spring Boot 中调用 OpenAI ChatGPT API。 我们将创建一个 Spring Boot 应用程序,该应用程序将通过调用 OpenAI ChatGPT API 生成对提示的响应。 2、OpenAI ChatGPT API 在开始具体讲解之前,让我们先探讨一下我们将在本教…

学习笔记:Opencv实现拉普拉斯图像锐化算法

2023.8.19 为了在暑假内实现深度学习的进阶学习,Copy大神的代码,记录学习日常 图像锐化的百科: 图像锐化算法-sharpen_lemonHe_的博客-CSDN博客 在环境配置中要配置opencv: pip install opencv-contrib-python Code and lena.png…

一种基于springboot、redis的分布式任务引擎的实现(一)

总体思路是,主节点接收到任务请求,将根据任务情况拆分成多个任务块,将任务块标识的主键放入redis。发送redis消息,等待其他节点运行完毕,结束处理。接收到信息的节点注册本节点信息到redis、开启多线程、获取任务块、执…

OpenCV基础知识(5)— 几何变换

前言:Hello大家好,我是小哥谈。OpenCV中的几何变换是指改变图像的几何结构,例如大小、角度和形状等,让图像呈现出缩放、翻转、旋转和透视效果。这些几何变换操作都涉及复杂、精密的计算。OpenCV将这些计算过程都封装成了非常灵活的…

开源了一套基于springboot+vue+uniapp的商城,包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发

RuoYi-Mall-JAVA商城-电商系统简介 开源了一套基于若依框架,SringBoot2MybatisPlusSpringSecurityjwtredisVueUniapp的前后端分离的商城系统, 包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发。 前端采用Vue、Element UI(ant…

Mac terminal 每次打开都要重新配置文件

1. 问题描述 每次打开 Terminal,base_profile文件中配置的内容就不生效,需要重新执行source ~/.bash_profile才可以使用。 2. 原因分析 zsh加载的是~/.zshrc文件,而.zshrc 文件中并没有定义任务环境变量。 3. 解决办法 在~/.zshrc文件末尾添…

CF1017B The Bits 题解

想死人的思维题哈哈。 题目传送门 题目意思: 给你两个二进制串,你可以将第一个二进制串的任意两个位置的数字调换,问有多少种方案可以让这两个二进制串按位或的结果改变? 思路: 要从按位或的性质上开始思考。 按位…

Debian10: 安装nut服务器(UPS)

UPS说明: UPS的作用就不必讲了,我选择是SANTAKTGBOX-850,规格为 850VA/510W,可以满足所需,关键是Debian10自带了驱动可以支持,免去安装驱动,将UPS通过USB线连接服务器即可,如下图所示…

Vue初识别--环境搭建--前置配置过程

问题一: 在浏览器上的扩展程序上添加了vue-devtools后不生效: 解决方式:打开刚加入的扩展工具Vue.js devtools的允许访问文件地址设置 问题二:Vue新建一个项目 创建一个空文件夹hrsone,然后在VSCode中打开这个空文件夹…

RequestRespons

文章目录 Request&Respons1 Request和Response的概述2 Request对象2.1 Request继承体系2.2 Request获取请求数据2.2.1 获取请求行数据2.2.2 获取请求头数据2.2.3 获取请求体数据2.2.4 获取请求参数的通用方式 2.3 IDEA快速创建Servlet2.4 请求参数中文乱码问题2.4.1 POST请…

基于Python的微博大数据舆情分析,舆论情感分析可视化系统,可作为Python毕业设计

运行效果图 基于Python的微博大数据舆情分析,舆论情感分析可视化系统 系统介绍 微博舆情分析系统,项目后端分爬虫模块、数据分析模块、数据存储模块、业务逻辑模块组成。 先后进行了数据获取和筛选存储,对存储后的数据库数据进行提取分析处…

iptables安全与防火墙

防火墙 防火墙主要作用是隔离功能,它是部署在网络边缘或主机边缘;另外在生产中防火墙的主要作用是:决定哪些数据可以被外网访问以及哪些数据可以进入内网访问;顾名思义防火墙处于TCP协议中的网络层。 防火墙分类: 软…

postgresql 分类排名

postgresql 分类排名 排名窗口函数示例CUME_DIST 和 NTILE 排名窗口函数 排名窗口函数用于对数据进行分组排名。常见的排名窗口函数包括: • ROW_NUMBER,为分区中的每行数据分配一个序列号,序列号从 1 开始分配。 • RANK,计算每…

数学建模之“灰色预测”模型

灰色系统分析法在建模中的应用 1、CUMCM2003A SARS的传播问题 2、CUMCM2005A长江水质的评价和预测CUMCM2006A出版社的资源配置 3、CUMCM2006B艾滋病疗法的评价及疗效的预测问题 4、CUMCM2007A 中国人口增长预测 灰色系统的应用范畴大致分为以下几方面: (1)灰色关…

“深度学习”学习日记:Tensorflow实现VGG每一个卷积层的可视化

2023.8.19 深度学习的卷积对于初学者是非常抽象,当时在入门学习的时候直接劝退一大班人,还好我坚持了下来。可视化时用到的图片(我们学校的一角!!!)以下展示了一个卷积和一次Relu的变化 作者使…

IronPDF for .NET Crack

IronPDF for .NET Crack ronPDF现在将等待HTML元素加载后再进行渲染。 IronPDF现在将等待字体加载后再进行渲染。 添加了在绘制文本时指定旋转的功能。 添加了在保存为PDFA时指定自定义颜色配置文件的功能。 IronPDF for.NET允许开发人员在C#、F#和VB.NET for.NET Core和.NET F…

​LeetCode解法汇总43. 字符串相乘

目录链接: 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目: https://github.com/September26/java-algorithms 原题链接:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 描述: 给定两个以…

深入探讨API接口测试:从基础到高级策略

引言:API测试的重要性 在当前的技术趋势中,API(应用程序接口)已经成为连接各种系统和服务的基石。API不仅仅是大型企业的领域,中小型公司和初创公司也越来越依赖API来拓展他们的业务功能和跨系统通信。正因如此&#…

【深入浅出C#】章节 8: 网络编程和远程通信:网络编程和远程通信

计算机网络是指连接多台计算机设备,通过通信链路共享资源和信息的系统。它构建了一个相互连接的世界,使得人们可以在不同地点进行数据交换和资源共享。网络编程是指在计算机网络中,使用编程语言进行通信和数据传输的技术。现代应用中&#xf…

虚拟机问题

虚拟机无法识别USB设备 经排查为VMware USB Arbitration Service 没有启动,但是VMware USB Arbitration Service依赖于VMware Workstation Server启动 VMware USB Arbitration Service(VMUSBArbService)是由 VMware 虚拟化软件提供的一个服务,用于协调和管理主机系统上的…