一、mix-blend-mode屬性介紹二、mix-blend-mode常用屬性值三、mix-blend-mode屬性應用1、應用效果2、相關代碼四、文字智能適配背景1、原始樣式2、添加混合3、實現程式碼
CSS中的【 mix-blend-mode屬性】描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合；
用於設定元素的背景與前景之間的混合模式；可以應用於任何元素；可以與background-image屬性一起使用，創建各種不同的視覺效果；
| 序號 | 屬性值 | 混合模式及說明 |
|---|---|---|
| 1 | mix-blend-mode: normal ; | 正常：此屬性不套用任何混合； |
| 2 | mix-blend-mode: multiply ; | 相乘：元素乘以背景並替換背景顏色，產生的顏色始終與背景一樣暗； |
| 3 | mix-blend-mode: overlay ; | 疊加：根據背景顏色對內容進行倍增或屏蔽，這與硬光混合模式相反； |
| 4 | mix-blend-mode: screen ; | 螢幕：將背景和內容相乘，然後補充結果。這將導致內容比背景顏色更亮； |
| 5 | mix-blend-mode: darken ; | 變暗；當內容變暗時，背景將被替換為內容，否則將保持原樣； |
| 6 | mix-blend-mode: lighten ; | 變亮：背景被替換為內容較亮的內容； |
| 7 | mix-blend-mode: color-dodge ; | 顏色變淡：此屬性使背景顏色變亮，以反映內容的顏色； |
| 8 | mix-blend-mode: color-burn ; | 顏色變淡：這會使背景變暗，以反映內容的自然顏色； |
| 9 | mix-blend-mode: hard-light ; | 硬光：根據內容的顏色，此屬性將對其進行篩選或倍增； |
| 10 | mix-blend-mode: soft-light ; | 柔光：根據內容的顏色，這會使其變暗或變亮； |
| 11 | mix-blend-mode: difference ; | 差異：這將從最亮的顏色中減去兩種顏色中較深的一種； |
| 12 | mix-blend-mode: exclusion ; | 排除：與差值相似，但對比較低； |
| 13 | mix-blend-mode: hue ; | 色調：透過內容的色調與背景的飽和度和亮度相結合來創造顏色； |
| 14 | mix-blend-mode: saturation ; | 飽和度：透過內容的飽和度和背景的色調和亮度來創造顏色； |
| 15 | mix-blend-mode: color ; | 顏色混合：根據內容的色調和飽和度以及背景的亮度創建顏色； |
| 16 | mix-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。 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 contentcontentere the is is whdar 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 content’s natural .hard.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 顏色. 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 lumino 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屬性的應用
<!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;
頂: 160px;
background-color: red;
}
.green-box {
left: 30px;
頂: 220px;
background-color: lightgreen;
}
.blue-box {
left: 110px;
頂: 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-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) {
// 設定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屬性，設定文字與背景的顏色混合，實現文字適配背景效果；
文字顏色為白色；在某些圖片上的可讀性很差；
.grid-item > h3 {
color: rgb(255, 255, 255);
.....
}
設定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;
.....
}注意：這裡的差值混合模式是應用在文字上的；
<!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中的mix-blend-mode屬性詳解(設定元素的混合模式)的文章就介紹到這了,更多相關css mix-blend-mode屬性內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！