CSS中的混合模式是一種強(qiáng)大的工具，它允許您控制兩個(gè)或多個(gè)圖層之間的相互作用，在CSS中，您可以使用mix-blend-mode屬性來(lái)設(shè)置混合模式，您提到的“穿透”并不是一個(gè)標(biāo)準(zhǔn)的混合模式。

不過(guò)，我可以向您解釋如何在CSS中設(shè)置其他常見(jiàn)的混合模式，比如normal、multiply、screen等，這些模式可以幫助您控制圖層的透明度、顏色混合方式等。

設(shè)置CSS混合模式

在CSS中設(shè)置混合模式非常簡(jiǎn)單，您只需要將mix-blend-mode屬性添加到需要應(yīng)用混合模式的元素上，并指定一個(gè)模式名稱(chēng)即可。

.element {
  mix-blend-mode: normal;
}

常見(jiàn)的混合模式

1、normal：這是默認(rèn)值，圖層按照正常的堆疊順序繪制。

2、multiply：將底層和頂層顏色相乘，適用于需要增強(qiáng)圖像亮度和對(duì)比度的場(chǎng)景。

3、screen：將底層和頂層顏色相減，適用于需要降低圖像亮度和對(duì)比度的場(chǎng)景。

4、overlay：將底層和頂層顏色疊加，底層顏色更加突出。

5、darken：取底層和頂層顏色中較暗的顏色，適用于需要突出顯示圖像中較暗部分的場(chǎng)景。

6、lighten：取底層和頂層顏色中較亮的顏色，適用于需要突出顯示圖像中較亮部分的場(chǎng)景。

示例

下面是一個(gè)簡(jiǎn)單的HTML和CSS示例，展示如何應(yīng)用不同的混合模式：

<div class="container">
  <div class="layer1" style="mix-blend-mode: normal;"></div>
  <div class="layer2" style="mix-blend-mode: multiply;"></div>
  <div class="layer3" style="mix-blend-mode: screen;"></div>
  <div class="layer4" style="mix-blend-mode: overlay;"></div>
  <div class="layer5" style="mix-blend-mode: darken;"></div>
  <div class="layer6" style="mix-blend-mode: lighten;"></div>
</div>