CSS：mix-blend-mode属性（设置元素的混合模式）

目录

一、mix-blend-mode属性介绍

二、mix-blend-mode常用属性值

三、mix-blend-mode属性应用

四、文字智能适配背景

1、原始样式

2、添加混合 

3、实现代码 

一、mix-blend-mode属性介绍

CSS中的【mix-blend-mode属性】描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合；

  • 用于设置元素的背景与前景之间的混合模式；
  • 可以应用于任何元素；
  • 可以与background-image属性一起使用，创建各种不同的视觉效果；

二、mix-blend-mode常用属性值

序号属性值混合模式及说明
1mix-blend-mode: normal;正常：此属性不应用任何混合；
2mix-blend-mode: multiply;

相乘：元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；

3mix-blend-mode: overlay;

叠加：根据背景颜色对内容进行倍增或屏蔽，这与硬光混合模式相反；

4mix-blend-mode: screen;

屏幕：将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；

5mix-blend-mode: darken;变暗；当内容变暗时，背景将被替换为内容，否则将保持原样；
6mix-blend-mode: lighten;

变亮：背景被替换为内容较亮的内容；

7mix-blend-mode: color-dodge;颜色变淡：此属性使背景颜色变亮，以反映内容的颜色；
8mix-blend-mode: color-burn;颜色变淡：这会使背景变暗，以反映内容的自然颜色；
9mix-blend-mode: hard-light;硬光：根据内容的颜色，此属性将对其进行筛选或倍增；
10mix-blend-mode: soft-light;柔光：根据内容的颜色，这会使其变暗或变亮；
11mix-blend-mode: difference;差值：这将从最亮的颜色中减去两种颜色中较深的一种；
12mix-blend-mode: exclusion;排除：与差值相似，但对比度较低；
13mix-blend-mode: hue;色调：通过内容的色调与背景的饱和度和亮度相结合来创建颜色；
14mix-blend-mode: saturation;饱和度：通过内容的饱和度和背景的色调和亮度来创建颜色；
15mix-blend-mode: color;

颜色混合：根据内容的色调和饱和度以及背景的亮度创建颜色；

16mix-blend-mode: luminosity;光度：根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；
  • normal : this attribute applies no blending whatsoever.
  • multiply : the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background.
  • screen : multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color.
  • overlay : multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode.
  • darken : the background is replaced with the content where the content is darker, otherwise, it is left as it was.
  • lighten : the background is replaced with the content where the content is lighter.
  • color-dodge : this attribute brightens the background color to reflect the color of the content.
  • color-burn : this darkens the background to reflect the content’s natural color.
  • hard-light : depending on the color of the content this attribute will screen or multiply it.
  • soft-light : depending on the color of the content this will darken or lighten it.
  • difference : this subtracts the darker of the two colors from the lightest color.
  • exclusion : similar to difference but with lower contrast.
  • hue : creates a color with the hue of the content combined with the saturation and luminosity of the background.
  • saturation : creates a color with the saturation of the content combined with the hue and luminosity of the background.
  • color : creates a color with the hue and saturation of the content and the luminosity of the background.
  • luminosity : creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute.

三、mix-blend-mode属性应用

1、应用效果

mix-blend-mode属性的应用

2、相关代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>mix-blend-mode属性的应用</title><style>* {margin: 0;padding: 0;}.container {/* 定义变量 */--mix-blend-mode: normal;position: relative;width: 300px;height: 400px;margin: 60px;padding: 20px;box-shadow: 0 0 6px 1px #999;border-radius: 6px;caret-color: transparent;}h3,h4 {margin-bottom: 10px;}.info-box {width: 100%;height: 24px;line-height: 24px;}.circle {position: absolute;width: 200px;height: 200px;border-radius: 50%;mix-blend-mode: var(--mix-blend-mode);}.red-box {left: 70px;top: 160px;background-color: red;}.green-box {left: 30px;top: 220px;background-color: lightgreen;}.blue-box {left: 110px;top: 220px;background-color: blue;}</style>
</head><body><div class="container"><h3>mix-blend-mode属性的应用</h3><h4 class="value-box"></h4><div class="info-box"></div><div class="circle red-box"></div><div class="circle green-box"></div><div class="circle blue-box"></div></div>
</body>
<script>// 获取元素var container = document.querySelector(".container");var valueBox = document.querySelector(".value-box");var infoBox = document.querySelector(".info-box");// mix-blend-mode属性的取值列表及说明;var values = [{id: 1,name: "正常",value: "normal",info: "此属性不应用任何混合；"},{id: 2,name: "相乘",value: "multiply",info: "元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；"},{id: 3,name: "叠加",value: "overlay",info: "根据背景颜色对内容进行倍增或屏蔽；这与硬光混合模式相反；"},{id: 4,name: "屏幕",value: "screen",info: "将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；"},{id: 5,name: "变暗",value: "darken",info: "当内容变暗时，背景将被替换为内容，否则将保持原样；"},{id: 6,name: "变亮",value: "lighten",info: "背景被替换为内容较亮的内容；"},{id: 7,name: "颜色变淡",value: "color-dodge",info: "此属性使背景颜色变亮，以反映内容的颜色;"},{id: 8,name: "颜色变淡",value: "color-burn",info: "这会使背景变暗，以反映内容的自然颜色;"},{id: 9,name: "硬光",value: "hard-light",info: "根据内容的颜色，此属性将对其进行筛选或倍增。"},{id: 10,name: "柔光",value: " soft-light",info: "根据内容的颜色，这会使其变暗或变亮；"},{id: 11,name: "差值",value: "difference",info: "这将从最亮的颜色中减去两种颜色中较深的一种；"}, {id: 12,name: "排除",value: "exclusion",info: "与差值相似，但对比度较低；"},{id: 13,name: "色调",value: "hue",info: "通过内容的色调与背景的饱和度和亮度相结合来创建颜色；"},{id: 14,name: "饱和度",value: "saturation",info: "通过内容的饱和度和背景的色调和亮度来创建颜色；"},{id: 15,name: "颜色混合",value: "color",info: "根据内容的色调和饱和度以及背景的亮度创建颜色；"},{id: 16,name: "亮度",value: "luminosity",info: "根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；"}]changeMode();// 改变mix-blend-modefunction changeMode() {let index = 0;modAttr(index);let timerId = setInterval(() => {if (index >= values.length) {clearInterval(timerId);return;}index++;modAttr(index)}, 3000)}function modAttr(index) {// 设置mix-blend-mode的属性值container.style.setProperty('--mix-blend-mode', values[index].value);valueBox.innerHTML = `mix-blend-mode : ${values[index].value};`;infoBox.innerHTML = `${values[index].name}(${values[index].value}): ${values[index].info}`}</script></html>

四、文字智能适配背景

很多时候，文字需要压着图片显示，如果文字和图片的颜色接近，可读性就会受到严重影响；

如何能让文字自动适配背景？

就可以利用mix-blend-mode属性，设置文字与背景的颜色混合，实现文字适配背景效果；

1、原始样式

文字颜色为白色；在一些图片上的可读性很差；

.grid-item > h3 {color: rgb(255, 255, 255);......
}

2、添加混合 

设置mix-blend-mode属性为difference；

文字颜色的初始值是白色，但会与父元素背景对应的每像素颜色值进行差值计算，得到一个新的颜色值；

文字颜色值 - 背景颜色值 = 混合后的像素值；（每一像素）

例如：文字颜色（255, 255, 255），背景颜色（255, 255, 255），计算后的值（0, 0, 0），显示为黑色；

.grid-item>h3 {color: rgb(255, 255, 255);/* 设置混合模式 -- 计算差值 */mix-blend-mode: difference;......
}

注意：这里的差值混合模式是应用在文字上的；

3、实现代码 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字智能适配背景</title><style>* {margin: 0;padding: 0;}.container {display: flex;width: 100vw;height: 60vh;justify-content: center;align-items: center;}.grid-container {display: grid;grid-template-columns: 400px 400px 400px;grid-template-rows: 200px 200px;gap: 10px;}.grid-item {background-repeat: no-repeat;background-size: cover;border-radius: 6px;box-shadow: 0 0 6px 1px #999;}.grid-item>h3 {color: rgb(255, 255, 255);font-size: 36px;/* 设置混合模式 -- 计算差值 */mix-blend-mode: difference;}.grid-item:nth-child(1) {/* background-image: url("D:\\test\\zyl-img\\bg_1.jpg"); */background-color: red}.grid-item:nth-child(2) {/* background-image: url("D:\\test\\zyl-img\\bg_2.jpg"); */background-color: purple;}.grid-item:nth-child(3) {/* background-image: url("D:\\test\\zyl-img\\bg_3.jpg"); */background-color: yellow;}.grid-item:nth-child(4) {/* background-image: url("D:\\test\\zyl-img\\bg_4.jpg"); */background-color: green;}.grid-item:nth-child(5) {/* background-image: url("D:\\test\\zyl-img\\bg_5.jpg"); */background-color: teal;}.grid-item:nth-child(6) {/* background-image: url("D:\\test\\zyl-img\\bg_6.jpg"); */background-color: blue;}</style>
</head><body><div class="container"><div class="grid-container"><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div><div class="grid-item"><h3>mix-blend-mode属性的应用</h3></div></div></div>
</body></html>

=========================================================================

每天进步一点点~！

记录一下CSS中的这个属性~~！

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

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

相关文章

C# 植物大战僵尸

C# 植物大战僵尸

Winform 版本开发 高效率、流畅植物大战僵尸 git地址&#xff1a;冯腾飞/植物大战僵尸
阅读更多...
3. 类的生命周期

3. 类的生命周期

类的生命周期是指一个类被加载&#xff0c;使用&#xff0c;卸载的一个过程&#xff0c;如下图&#xff1a; 类的加载阶段&#xff1a; 加载(Loading)阶段第一步是类加载器根据类的**全限定名&#xff08;也就是类路径&#xff09;**通过不同的渠道以二进制流的方式获取字节码…
阅读更多...
[C#]调用本地摄像头录制视频并保存

[C#]调用本地摄像头录制视频并保存

AForge.NET是一个基于C#框架设计的开源计算机视觉和人工智能库&#xff0c;专为开发者和研究者设计。它提供了丰富的图像处理和视频处理算法、机器学习和神经网络模型&#xff0c;具有高效、易用、稳定等特点。AForge库由多个组件模块组成&#xff0c;包括AForge.Imaging&#…
阅读更多...
go语言day19 使用git上传包文件到github Gin框架入门

go语言day19 使用git上传包文件到github Gin框架入门

git分布式版本控制系统_git切换head指针-CSDN博客 获取请求参数并和struct结构体绑定_哔哩哔哩_bilibili &#xff08;gin框架&#xff09; GO: 引入GIn框架_go 引入 gin-CSDN博客 使用git上传包文件 1&#xff09;创建一个github账户&#xff0c;进入Repositories个人仓…
阅读更多...
【深度学习】语音合成，TTS，fish-speech

【深度学习】语音合成，TTS，fish-speech

官方项目地址&#xff1a;https://github.com/fishaudio/fish-speech git clone https://github.com/fishaudio/fish-speech.gitdocker run -it --gpus device3 -v /ssd/xiedong/tts:/ssd/xiedong/tts --net host --shm-size 16G kevinchina/deeplearning:pytorch2.3.0-cuda12.…
阅读更多...
Matlab编程资源库（9）数据插值与曲线拟合

Matlab编程资源库（9）数据插值与曲线拟合

一、一维数据插值 在MATLAB中&#xff0c;实现这些插值的函数是interp1&#xff0c;其调用格式为&#xff1a; Y1interp1(X,Y,X1,method) 函数根据X,Y的值&#xff0c;计算函数在X1处的值。X,Y是两个等长的已知向量&#xff0c;分别描述采样点和样本值&#xff0c;X1是一个向量…
阅读更多...
第三届人工智能、物联网和云计算技术国际会议（AIoTC 2024，9月13-15）

第三届人工智能、物联网和云计算技术国际会议（AIoTC 2024，9月13-15）

第三届人工智能、物联网与云计算技术国际会议(AIoTC 2024)将于2024年9月13日-15日在中国武汉举行。 本次会议由华中师范大学伍伦贡联合研究院与南京大学联合主办、江苏省大数据区块链与智能信息专委会承办、江苏省概率统计学会、江苏省应用统计学会、Sir Forum、南京理工大学、…
阅读更多...
昇思25天学习打卡营第21天|Pix2Pix实现图像转换

昇思25天学习打卡营第21天|Pix2Pix实现图像转换

相关知识 图像翻译 图像翻译Image translation是一种计算机视觉任务&#xff0c;旨在将一种图像转换为另一种图像。典型的任务包括&#xff1a;图像到图像的转换如白天到黑夜&#xff0c;风格迁移&#xff0c;图像修复。 CGAN CGAN在GAN的基础上引入了条件信息&#xff0c;…
阅读更多...
MATLAB-bode图编程

MATLAB-bode图编程

num[1 1];den [2 1];tf(num,den)bode(tf(num,den));hold on
阅读更多...
python selenium selenium-wire使用代理

python selenium selenium-wire使用代理

前言 最近使用selenium、selenium-wire爬取数据&#xff0c;在使用代理时查阅很多资料&#xff0c;在使用过程中发现很多资料、博客中都是错误的用法&#xff0c;误导初学selenium使用代理的开发者 描述&#xff1a; 我这里使用的是Python 3.12.2 selenium4.23.1 seleni…
阅读更多...
torch fbgemm.dll 报错

torch fbgemm.dll 报错

这里写自定义目录标题 OSError: [WinError 126] The specified module could not be found. Error loading \"c:\\Users\\Noor\\anaconda3\\envs\\DL\\Lib\\site-packages\\torch\\lib\\fbgemm.dll\" or one of its dependencies."https://github.com/lucasg/De…
阅读更多...
uniapp小程序中富文本内容渲染图片不展示的问题

uniapp小程序中富文本内容渲染图片不展示的问题

文章目录 1.从后端请求的数据中图片是这样的2.前端我是用Uview中的u-parse组件3.这样修改去掉富文本中的所有反斜杠4.完美解决 1.从后端请求的数据中图片是这样的 <p><img src\\\"https://zhangsanfengcode.cn:8084/images/2024-06-28a257befe.jpg\\\" alt…
阅读更多...
【XML入门精要】从零开始的开发之旅

【XML入门精要】从零开始的开发之旅

参考文档&#xff1a;XML 教程 (w3school.com.cn) 简介 XML&#xff0c;全称eXtensible Markup Language&#xff0c;即“可扩展标记语言”&#xff0c;是一种用于存储和传输数据的标准格式。它由万维网联盟&#xff08;W3C&#xff09;开发&#xff0c;目的是克服HTML&#…
阅读更多...
【网络流】——初识(最大流)

【网络流】——初识(最大流)

网络流-最大流 基础信息引入一些概念基本性质 最大流定义 Ford–Fulkerson 增广Edmons−Karp算法Dinic 算法参考文献 基础信息 引入 假定现在有一个无限放水的自来水厂和一个无限收水的小区&#xff0c;他们之间有多条水管和一些节点构成。 每一条水管有三个属性&#xff1a…
阅读更多...
如何查看cpu架构，查看CPU架构的方法

如何查看cpu架构，查看CPU架构的方法

查看CPU架构的方法有很多&#xff0c;具体取决于你使用的操作系统。以下是一些常见的操作系统中查看CPU架构的方法&#xff1a; Windows查看CPU架构的方法 使用系统信息工具 按 Win R 打开运行窗口。输入 msinfo32 并按 Enter。在系统信息窗口中&#xff0c;找到“处理器”一…
阅读更多...
懂个锤子Vue 项目工程化进阶⏫：

懂个锤子Vue 项目工程化进阶⏫：

Vue项目工程化进阶⏫&#xff1a; 前言&#xff1a; 紧跟前文&#xff0c;目标学习Vue2.0——3.0&#xff1a; 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的技术栈… 当然既然学习框架的了&#xff0c;HTMLCSSJS三件套必须的就不说了&#xff1a; JavaScript 快速入门 …
阅读更多...
7-25学习笔记

7-25学习笔记

一、锁对象 Lock接口 1、创建锁对象 ReentrantLock类 Lock locknew ReentrantLock(true); 默认创建的是非公平锁 在创建锁对象时传入一个true参数 便会创建公平锁 先来后到 是重入锁 排他锁 加锁后不允许其它线程进入 2、加锁、解锁 &#xff08;1&#xff09;loc…
阅读更多...
Redis-数据的极速之旅（一）

Redis-数据的极速之旅（一）

Redis基础篇 Redis的自我介绍我的核心数据结构1.字符串&#xff08;String&#xff09;2.哈希&#xff08;Hash&#xff09;3.列表&#xff08;List&#xff09;4.集合&#xff08;Set&#xff09;5.有序集合&#xff08;Sorted Set&#xff09; 高性能原理1.Redis为什么快&…
阅读更多...
B端系统UI个性化设计：感受定制之美

B端系统UI个性化设计：感受定制之美

B端系统UI个性化设计&#xff1a;感受定制之美 引言 艾斯视觉作为ui设计和前端开发从业者&#xff0c;其观点始终认为&#xff1a;在当今竞争激烈的商业环境中&#xff0c;B端&#xff08;Business-to-Business&#xff09;系统的设计不再仅仅是功能性的堆砌&#xff0c;而是…
阅读更多...
书生大模型实战营--L1关卡-OpenCompass 评测 InternLM-1.8B 实践

书生大模型实战营--L1关卡-OpenCompass 评测 InternLM-1.8B 实践

一、使用 OpenCompass 评测 internlm2-chat-1.8b 模型在 MMLU 数据集上的性能 1、使用lmdeploy部署 internlm2-chat-1.8b模型 2、根据OpenCompass官网教程安装并下载数据集 opencompass/README_zh-CN.md at main open-compass/opencompass GitHub 注意&#xff1a; pyhton…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023