如何使用 CSS 混合模式

CSS 混合模式是一種在瀏覽器中添加圖像效果的簡單方法。 因此，從圖像編輯軟件解決方案編輯然後保存照片的傳統方式並不總是必要的。 作為設計師，我們花費了無數時間使用 Adob​​e Photoshop 等工具為圖像添加效果。 在閱讀本教程時，您會注意到許多選項與 Photoshop 中的選項相似，但現在可以通過 CSS 樣式的效率來完成。

瀏覽器混合模式會完全消除對圖像編輯軟件的需求嗎？ 不完全，當然還沒有。 但 CSS 和瀏覽器支持在支持新的圖像編輯方式方面取得了長足的進步。 CSS 和 SVG 剪輯和遮罩、混合模式、3D 變換等當然可以減少我們對圖像編輯軟件的依賴。 隨著瀏覽器變得越來越複雜，我們將看到更多的潛力，並且（希望）花更少的時間在 Photoshop 上。

CSS 混合模式和 CSS 混合混合模式

本教程將介紹 CSS 混合模式及其使用方式。 首先，您應該注意幾個不同的選項。 一種是帶有background-blend-mode的效果，另一種是帶有mix-blend-mode的效果。

使用background-blend-mode property ，您可以混合元素的背景層（圖像或顏色）。 混合模式被定義為一個值，它們指定如何將背景圖像的顏色與其後面的顏色或其他背景圖像混合或混合。

如果你想做一些混合而不是背景元素會發生什麼？ 可以使用mix-blend-mode屬性將元素混合在一起。 該屬性描述了堆疊的 HTML 元素之間的混合方式。 重疊圖層上的元素將與其下方的元素混合。 任何圖像、文本、邊框或標題都將受此屬性影響。

Adobe Photoshop 乘法示例

看看在圖像編輯器中顯示混合模式的傳統方式，我們可以了解使用 CSS 混合模式可以完成什麼。 以下照片是在 Adob​​e Photoshop 中創建的。 圖像在其自己的背景層上，上面有一個紅色層。 選擇了紅色圖層的混合模式，即“正片疊底”。 如您所見，有一個紅色疊加層。 為了達到這種效果，Adobe Photoshop 從應用了“正片疊底”的圖層中獲取顏色，乘以它下面圖層上的顏色，然後將它們除以 255 以顯示結果。

使用 CSS 可以實現相同的效果，允許更快的自定義和輕鬆更新。

CSS混合模式的基本示例

了解混合模式如何工作的一個簡單示例是將圖像與帶有background-color的 a 混合。 首先，需要聲明圖像的 URL 路徑，然後指定顏色。 在確定了這些之後，需要選擇混合模式。 此處選擇了 Multiply 以顯示此混合模式如何影響background-image的外觀。

.simple-blended {
 background-image: url(image.jpg);
 background-color: red;
 background-blend-mode: multiply;
 }

混合模式是當圖層重疊時計算像素最終顏色值的方式。 每個混合模式獲取前景和背景的顏色值（頂部顏色和底部顏色），計算其值，並返回一個顏色值。 最終的可見層是混合層之間每個重疊像素的混合模式計算的結果。

正片疊底是一種非常流行的混合模式，但也有其他可用的混合模式選項：屏幕、疊加、變暗、變亮、顏色減淡、顏色加深、強光、柔光、差異、排除、色調、飽和度、顏色和亮度。 如果指定“正常”，這將重置事物。 與其逐個了解每種混合模式的細節，不如嘗試它們是確定最終結果的最佳方式。

具有兩個圖像的背景混合模式

將兩個圖像疊加在一起可以產生非常酷的效果，而不是在圖像上疊加顏色。 就像在 CSS 聲明中添加兩個背景圖像一樣簡單。 下一個選擇是有背景顏色（或沒有）。 如果您不想要背景顏色，可以將其刪除，圖像將根據您選擇的混合模式混合在一起。

.two-image-stacked {
 background-image: url("image.jpg"), url("image-2.jpg");
 background-color: purple;
 background-blend-mode: lighten;
 }

背景混合模式上的漸變

漸變不僅可以使用單一顏色，還可以提供一些獨特的效果。

.gradient-on-image {
 background:
 linear-gradient(purple 0%, red 80%),
 linear-gradient(to right, purple 0%, yellow 100%),   url("image.jpg");
 background-blend-mode: screen, difference, lighten;
 }

您還會注意到此示例具有多種背景混合模式。 如果一種混合模式還不夠，可以使用多種混合模式。

工作示例可以在這個 Codepen 中找到。

混合混合模式示例

到目前為止，重點一直放在背景上。 如果頁面上的其他元素想要利用混合模式怎麼辦？ 這沒問題，並且可以使用相同的混合模式類型。

除了初始、繼承和未設置外， background-blend-modes中的情況看起來是一樣的。

• Initial：不設置混合模式的屬性的默認設置。
• 繼承：從其父元素繼承混合模式。
• 未設置：從元素中移除混合模式。

具有隔離的混合混合模式的基本示例

使用mix-blend-mode時，您會遇到需要進行一些隔離的情況。 首先，重要的是要知道“堆疊”是可能的，這在處理大量層時很有價值。 想想一堆盒子。 每個盒子都與組分開。 在每個盒子裡面，可以有多層物品。 在確定需要隔離的內容時，這種思維方式將有所幫助。

使用混合混合模式混合文本和圖像

在此示例中，具有img-wrap類的div包含圖像。 該圖像具有乘法的mix-blend-mode 。 所以基本上，圖像似乎落入背景中。

為了防止這種情況， img-wrap div（也包含標題文本）應該是一組新的堆疊內容，因此它與 body 元素的背景分開。 這是通過隔離屬性完成的。 默認值為auto，所以isolation: isolate; 將需要添加。

要對此進行測試，請使用.img-wrap類註釋掉div上的隔離屬性並檢查結果。

這是HTML：

<div class="img-wrap">
  <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" />
<h2>Outdoor Club</h2>
</div>

這是CSS。 密切注意.img-wrap上的isolate 。

h2 {
  margin-bottom: 7rem;
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  font-size: 4rem;
  padding: .5em .25em;
  color: #007eae;
  text-shadow: 2px 3px 3px #000;
  mix-blend-mode: overlay;
}

.img-wrap {
    width: 45%;
    padding: 1%;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
}

.img-wrap img {
  max-width: 100%;
  mix-blend-mode: multiply;
}

工作示例可以在 Codepen 上找到。

使用混合混合模式剪切文本

可以使用混合混合模式創建一些有趣的字體效果。 有一種簡單的方法可以製作剪切文本。 背景被h1元素上的填充隱藏。

這是HTML：

<div class="dark-cover">
  <h1>Outdoor Club</h1>
</div>

包含<div>的內容填充了森林背景圖像。

.dark-cover {
background-image: url(image.jpg);
text-align: center;
background-size: cover;
}

其中的標題使用可選的背景顏色進行樣式設置。 通過使用multiply mix-blend-mode ，標題與半透視背景圖像具有透視效果：

.dark-cover h1 {
  margin: 0;
  font-size: 8rem;
  text-transform: uppercase;
  line-height: 1.9;
  color: #fff;
  background-color: green;
  mix-blend-mode: multiply;
}

工作示例可以在 Codepen 上找到。

混合混合模式和 SVG

SVG 文件在網絡上非常流行，CSS 混合模式也適用於它們。 形狀可以很容易地定位，為它們提供所需的混合模式。

在這個例子中，隔離也是關鍵。 如果不隔離圓圈，灰色背景會干擾。

以下是創建圈子組的代碼：

<svg>
  <g class="isolate">
    <circle cx="60" cy="60" r="50" fill="red"/>
    <circle cx="100" cy="60" r="50" fill="lime"/>
    <circle cx="80" cy="100" r="50" fill="blue"/>
  </g>
</svg>

下面是 CSS 樣式：

body {
  background: #898989;
}
circle { 
  mix-blend-mode: screen; 
}  
.isolate { 
  isolation: isolate; 
}  

/* if this was not isolated, the gray background would impact the outcome */

這個例子可以在 Codepen 上找到。

瀏覽器支持背景混合模式和混合混合模式

瀏覽器支持非常好，但對於背景混合模式並不完全一致。 在開始使用此功能的設計之前，請務必檢查我可以使用。 目前，Edge 和 Safari 缺乏支持。 為了處理有限的支持並根據需要支持的瀏覽器，CSS 功能查詢可能是一個不錯的選擇。 如果沒有，將“混合”圖像視為增強（不是要求）可能是您最好的選擇。

瀏覽器對混合混合模式的支持稍好一些。 了解部分支持是件好事。 例如，Safari 不支持色調、飽和度、顏色或亮度。

真正了解可以使用混合模式設計什麼的最佳方法是進行實驗。 此處顯示的示例只是觸及表面。 使用混合模式可以創建什麼樣的圖形真是太神奇了。 對於可以在網絡上完成的事情，這是向前邁出的一大步。

下一個：適合網頁設計師的最佳 WordPress 插件

從插件中獲得更多您正在尋找的結果！ 我們研究、測試和編譯了每個網頁設計師都應該使用的終極“麵包和黃油”WordPress 插件！ 無論您是在市場上尋找新的反垃圾郵件、頁面構建器還是 SEO 插件，這個綜合列表都為您的 WordPress 需求提供了一些插件。 深受我們、我們的客戶和我們客戶的客戶的喜愛，這些是 WordPress 設計師的 20 個最佳插件。 在這裡閱讀整個列表！

本教程最初發佈於 2017 年 1 月 23 日。 上次更新時間為 2019 年 2 月 16 日。