CSS中的mix-blend-mode屬性詳解(設(shè)置元素的混合模式)
發(fā)布時(shí)間：2024-08-27 15:17:06 作者：白菜不太菜 
我要評(píng)論
我要評(píng)論CSS中的mix-blend-mode屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合，這篇文章主要介紹了CSS中的mix-blend-mode屬性詳解(設(shè)置元素的混合模式),需要的朋友可以參考下
一、mix-blend-mode屬性介紹
CSS中的【mix-blend-mode屬性】描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合；
- 用于設(shè)置元素的背景與前景之間的混合模式；
- 可以應(yīng)用于任何元素；
- 可以與background-image屬性一起使用，創(chuàng)建各種不同的視覺效果；
二、mix-blend-mode常用屬性值
| 序號(hào) | 屬性值 | 混合模式及說明 |
|---|---|---|
| 1 | mix-blend-mode: normal; | 正常：此屬性不應(yīng)用任何混合； |
| 2 | mix-blend-mode: multiply; | 相乘：元素乘以背景并替換背景顏色，生成的顏色始終與背景一樣暗； |
| 3 | mix-blend-mode: overlay; | 疊加：根據(jù)背景顏色對(duì)內(nèi)容進(jìn)行倍增或屏蔽，這與硬光混合模式相反； |
| 4 | mix-blend-mode: screen; | 屏幕：將背景和內(nèi)容相乘，然后補(bǔ)充結(jié)果。這將導(dǎo)致內(nèi)容比背景顏色更亮； |
| 5 | mix-blend-mode: darken; | 變暗；當(dāng)內(nèi)容變暗時(shí)，背景將被替換為內(nèi)容，否則將保持原樣； |
| 6 | mix-blend-mode: lighten; | 變亮：背景被替換為內(nèi)容較亮的內(nèi)容； |
| 7 | mix-blend-mode: color-dodge; | 顏色變淡：此屬性使背景顏色變亮，以反映內(nèi)容的顏色； |
| 8 | mix-blend-mode: color-burn; | 顏色變淡：這會(huì)使背景變暗，以反映內(nèi)容的自然顏色； |
| 9 | mix-blend-mode: hard-light; | 硬光：根據(jù)內(nèi)容的顏色，此屬性將對(duì)其進(jìn)行篩選或倍增； |
| 10 | mix-blend-mode: soft-light; | 柔光：根據(jù)內(nèi)容的顏色，這會(huì)使其變暗或變亮； |
| 11 | mix-blend-mode: difference; | 差值：這將從最亮的顏色中減去兩種顏色中較深的一種； |
| 12 | mix-blend-mode: exclusion; | 排除：與差值相似，但對(duì)比度較低； |
| 13 | mix-blend-mode: hue; | 色調(diào)：通過內(nèi)容的色調(diào)與背景的飽和度和亮度相結(jié)合來創(chuàng)建顏色； |
| 14 | mix-blend-mode: saturation; | 飽和度：通過內(nèi)容的飽和度和背景的色調(diào)和亮度來創(chuàng)建顏色； |
| 15 | mix-blend-mode: color; | 顏色混合：根據(jù)內(nèi)容的色調(diào)和飽和度以及背景的亮度創(chuàng)建顏色； |
| 16 | mix-blend-mode: luminosity; | 光度：根據(jù)內(nèi)容的光度和背景的色調(diào)和飽和度創(chuàng)建顏色。這與顏色屬性相反； |
- 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屬性應(yīng)用
1、應(yīng)用效果
mix-blend-mode屬性的應(yīng)用
2、相關(guān)代碼
<!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屬性的應(yīng)用</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屬性的應(yīng)用</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: "此屬性不應(yīng)用任何混合；"
},
{
id: 2,
name: "相乘",
value: "multiply",
info: "元素乘以背景并替換背景顏色，生成的顏色始終與背景一樣暗；"
},
{
id: 3,
name: "疊加",
value: "overlay",
info: "根據(jù)背景顏色對(duì)內(nèi)容進(jìn)行倍增或屏蔽；這與硬光混合模式相反；"
},
{
id: 4,
name: "屏幕",
value: "screen",
info: "將背景和內(nèi)容相乘，然后補(bǔ)充結(jié)果。這將導(dǎo)致內(nèi)容比背景顏色更亮；"
},
{
id: 5,
name: "變暗",
value: "darken",
info: "當(dāng)內(nèi)容變暗時(shí)，背景將被替換為內(nèi)容，否則將保持原樣；"
},
{
id: 6,
name: "變亮",
value: "lighten",
info: "背景被替換為內(nèi)容較亮的內(nèi)容；"
},
{
id: 7,
name: "顏色變淡",
value: "color-dodge",
info: "此屬性使背景顏色變亮，以反映內(nèi)容的顏色;"
},
{
id: 8,
name: "顏色變淡",
value: "color-burn",
info: "這會(huì)使背景變暗，以反映內(nèi)容的自然顏色;"
},
{
id: 9,
name: "硬光",
value: "hard-light",
info: "根據(jù)內(nèi)容的顏色，此屬性將對(duì)其進(jìn)行篩選或倍增。"
},
{
id: 10,
name: "柔光",
value: " soft-light",
info: "根據(jù)內(nèi)容的顏色，這會(huì)使其變暗或變亮；"
},
{
id: 11,
name: "差值",
value: "difference",
info: "這將從最亮的顏色中減去兩種顏色中較深的一種；"
}, {
id: 12,
name: "排除",
value: "exclusion",
info: "與差值相似，但對(duì)比度較低；"
},
{
id: 13,
name: "色調(diào)",
value: "hue",
info: "通過內(nèi)容的色調(diào)與背景的飽和度和亮度相結(jié)合來創(chuàng)建顏色；"
},
{
id: 14,
name: "飽和度",
value: "saturation",
info: "通過內(nèi)容的飽和度和背景的色調(diào)和亮度來創(chuàng)建顏色；"
},
{
id: 15,
name: "顏色混合",
value: "color",
info: "根據(jù)內(nèi)容的色調(diào)和飽和度以及背景的亮度創(chuàng)建顏色；"
},
{
id: 16,
name: "亮度",
value: "luminosity",
info: "根據(jù)內(nèi)容的光度和背景的色調(diào)和飽和度創(chuàng)建顏色。這與顏色屬性相反；"
}
]
changeMode();
// 改變mix-blend-mode
function changeMode() {
let index = 0;
modAttr(index);
let timerId = setInterval(() => {
if (index >= values.length) {
clearInterval(timerId);
return;
}
index++;
modAttr(index)
}, 3000)
}
function modAttr(index) {
// 設(shè)置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>四、文字智能適配背景
很多時(shí)候，文字需要壓著圖片顯示，如果文字和圖片的顏色接近，可讀性就會(huì)受到嚴(yán)重影響；
如何能讓文字自動(dòng)適配背景？
就可以利用mix-blend-mode屬性，設(shè)置文字與背景的顏色混合，實(shí)現(xiàn)文字適配背景效果；
1、原始樣式
文字顏色為白色；在一些圖片上的可讀性很差；
.grid-item > h3 {
color: rgb(255, 255, 255);
......
}
2、添加混合
設(shè)置mix-blend-mode屬性為difference；
文字顏色的初始值是白色，但會(huì)與父元素背景對(duì)應(yīng)的每像素顏色值進(jìn)行差值計(jì)算，得到一個(gè)新的顏色值；
文字顏色值 - 背景顏色值 = 混合后的像素值；（每一像素）
例如：文字顏色（255, 255, 255），背景顏色（255, 255, 255），計(jì)算后的值（0, 0, 0），顯示為黑色；
.grid-item>h3 {
color: rgb(255, 255, 255);
/* 設(shè)置混合模式 -- 計(jì)算差值 */
mix-blend-mode: difference;
......
}注意：這里的差值混合模式是應(yīng)用在文字上的；
3、實(shí)現(xiàn)代碼
<!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;
/* 設(shè)置混合模式 -- 計(jì)算差值 */
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屬性的應(yīng)用</h3>
</div>
<div class="grid-item">
<h3>mix-blend-mode屬性的應(yīng)用</h3>
</div>
<div class="grid-item">
<h3>mix-blend-mode屬性的應(yīng)用</h3>
</div>
<div class="grid-item">
<h3>mix-blend-mode屬性的應(yīng)用</h3>
</div>
<div class="grid-item">
<h3>mix-blend-mode屬性的應(yīng)用</h3>
</div>
<div class="grid-item">
<h3>mix-blend-mode屬性的應(yīng)用</h3>
</div>
</div>
</div>
</body>
</html>到此這篇關(guān)于CSS中的mix-blend-mode屬性詳解(設(shè)置元素的混合模式)的文章就介紹到這了,更多相關(guān)css mix-blend-mode屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS中mix-blend-mode屬性的應(yīng)用詳解
在前端開發(fā)的大海中，CSS是那抹不可或缺的顏料，為網(wǎng)站的界面著色,本文將聚焦于其中一種鮮為人知卻強(qiáng)大的CSS屬性——mix-blend-mode，深入探討其定義、應(yīng)用場(chǎng)景及用法，感2023-12-14