什麼是混合？
根據維基百科：
❝數位影像編輯和電腦圖形中的混合模式(或混合模式)用於確定兩個圖層如何相互混合。在大多數應用程式中，預設的混合模式只是透過用頂層的內容覆蓋底層來隱藏底層。
❞
在CSS中，有兩個屬性負責混合。 mix-blend-mode用於混合DOM元素，background-blend-mode用於組合多個CSS背景。
（學習影片分享：css影片教學）
#進入<span style="font-size: 20px;">mix-Blend-Mode</span>
基礎範例
#我們以基本的範例來看一下它是如何工作的。我的標題上方有一個圓圈。我要做的是將文字與圓混合。
「HTML」
<div class="circle"></div> <p>Blend Me</p>
「CSS」
為文字元素新增了mix-blend-mode : overlay，從而將其與圓混合。
事例原始碼：https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100
#有文字的圖片
我認為這是一個廣泛使用的混合模式。文字在上面，圖片在下面。
在標題中加入了以下內容：
.hero-title {
color: #000;
mix-blend-mode: overlay;
}#不僅僅是改變混合模式。例如，我們可以透過創建動畫來提高創意。
在此範例中，我想探討文字如何與樹葉背景融合。由於圖像中包含暗點和亮點，因此在使文字看起來像在每片葉子下移動一樣，這將起到非常有用的作用。
「 SVG圖形的文字
我們能用這些斑點形狀做什麼?我使用MorphSVG外掛程式改變每個部落格形狀的路徑。這產生了一個有趣的結果。
##混合真實元素
放大鏡類
影片封面
.article__play {
mix-blend-mode: screen;
}
.article:hover .article__play {
mix-blend-mode: normal;
}
.article:hover .article__play {
.play__base {
fill: #005FFF;
}
.play__icon {
fill: #fff;
}
}事例源码：https://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=0100
另一种情况是使用裁切图像并将其与其下方的背景融合，结果非常有趣。
img {
position: absolute;
right: -15px;
top: 0;
width: 110px;
mix-blend-mode: screen;
}这个想法是把图片放在右边，左边有标题和描述。
同样，通过为每张卡添加多个背景可以更好:
事例源码：https://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=1000
我在Photoshop的早期就知道这个技巧。有时，我需要一个品牌的标志，它是很难得到一个透明的PNG版本。使用混合模式，这很容易解决。
我模拟了Facebook和Amazon徽标，并在每个徽标下添加了白色背景。
现在来解决这个问题，添加了以下CSS：
img {
mix-blend-mode: multiply;
filter: contrast(2);
}注意，我添加了filter: contrast(2)来增加徽标的对比度。应用混合效果使他们比原来的颜色深一点。
问题已解决！当然，我不建议使用此功能。但是，如果我被迫这么做，我将使用它来节省时间，当原始徽标到达时，我可以替换它并消除混合效果。
事例源码：https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100
Isolation
isolation CSS属性定义该元素是否必须创建一个新的层叠上下文（stacking context）。
该属性的主要作用是当和background-blend-mode属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。
「html」
<div> <span>CSS is Awesome</span> </div>
「css」
div {
isolation: isolate; /* Creates a new stacking context */
}
span {
mix-blend-mode: difference;
}如你所见，文本“ CSS很棒”仅在其父代的边界内融合。外面的东西不会混在一起。换句话说，它是孤立的。
事例源码：https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100
isolation 可以通过使用创建新的堆栈上下文的属性来实现。例如，如果父元素具有opacity 属性，这将影响结果。
「html」
<div> <img class="lazy" data-src="cake.jpg" alt=""> </div>
「css」
div {
opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */
}
img {
mix-blend-mode: difference;
}
事例源码：https://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=0100
进入Background-Blend-Mode
它的工作方式类似mix-blend-mode，但具有多个背景图像。每个背景可以有自己的混合模式，举个例子。
在此示例中，将三层混合在一起：基础图像，实心填充(Solid Fill)和渐变填充(radient Fill.)。
.elem {
background: linear-gradient(45deg, #000 10%, transparent),
linear-gradient(#3754C7, #3754C7),
url(nature.jpg);
background-size: cover;
background-blend-mode: overlay, color;
}在CSS中，应该以正确的方式对每个背景进行排序。堆叠顺序从上到下，如上图所示。
事例源码：https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100
通过使用径向梯度，有一些有趣的结果比有用。这个想法是添加一个彩色的图像，使它与它混合。
:root {
--color: #000;
--size: 250px; /* Gradient Size */
}
.elem-1 {
background: radial-gradient(circle var(--size) at center, transparent, var(--color)),
url(nature.jpg);
}通过对元素应用background-blend-mode: color，结果是图像的去饱和版本。
事例源码：https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8
「浏览器支持」
原文網址：https://css-tricks.com/basics-css-blend-modes/
作者：Ahmad Shaeed
翻譯網址：https:// segmentfault.com/a/1190000038883022
更多程式相關知識，請造訪：程式設計入門！ ！
以上是談談CSS中的混合模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
