如何使用 CSS 混合模式

已發表: 2023-02-16

CSS 混合模式是一種直接在瀏覽器中添加圖像效果的簡單方法。

因此，並不總是需要使用圖像編輯軟件解決方案編輯然後保存照片的傳統方式。 作為設計師，我們花費了無數時間使用 Adob​​e Photoshop 等工具為圖像添加效果。 在學習本教程時，您會注意到許多選項類似於 Photoshop 中的選項，但現在可以通過 CSS 樣式的效率來完成它們。

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

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

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

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

如果您想進行一些混合但不與背景元素混合會怎樣？ 可以使用mix-blend-mode屬性將元素混合在一起。 此屬性描述堆疊的 HTML 元素之間的混合方式。 重疊層上的元素將與其下方的元素混合。 任何圖像、文本、邊框或標題都將受此屬性的影響。

Adobe Photoshop 乘法示例

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

在 Adob​​e Photoshop 中使用 CSS 混合模式

使用 CSS 可以實現相同的效果，從而實現更快的定制和更輕鬆的更新。

CSS 混合模式的基本示例

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

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }
在 Adob​​e Photoshop 中使用多重混合模式之前和之後的海洋照片
創建了一個類為 .simple-blended 的 div 來顯示乘法混合模式。 左邊是原始的，右邊是應用了混合模式的。

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

乘法是一種非常流行的混合模式，但也有其他可用的混合模式選項：屏幕、疊加、變暗、變亮、顏色減淡、顏色加深、強光、柔光、差異、排除、色調、飽和度、顏色和亮度。 如果指定了“normal”，這將重置內容。 與其一一研究每種混合模式的細節，不如對它們進行試驗是確定最終結果的最佳方式。

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

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

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }
頂行圖像是單獨的原始圖像。第二行左邊的圖像有一個背景色：紫色；添加。右邊的圖像沒有背景顏色。
頂行圖像是單獨的原始圖像。 第二行左邊的圖像有一個背景色：紫色； 添加。 右邊的圖像沒有背景顏色。

背景混合模式的漸變

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

 .gradient-on-image {
 背景：
 線性漸變（紫色 0%，紅色 80%），
 線性漸變（向右，紫色 0%，黃色 100%），url（“image.jpg”）；
 背景混合模式：屏幕，差異，變亮；
 }
左邊的圖像沒有應用混合模式。右邊的圖像應用了漸變和多種混合模式。
左邊的圖像沒有應用混合模式。 右邊的圖像應用了漸變和多種混合模式。

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

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

混合混合模式示例

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

除了 initial、inherit 和 unset 之外background-blend-modes看起來是一樣的。

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

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

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

使用 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 上找到工作示例。

使用 Mix-blend-mode 剪切文本

可以使用 mix 混合模式創建一些有趣的類型效果。 有一種簡單的方法可以剪切文本。 背景被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; }
在綠色背景上使用 mix-blend-mode 讀取 Outdoor Club 的文本切口。 Outdoor 這個詞前面出現了一條樹線

可以在 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 功能查詢可能是一個不錯的選擇。 如果沒有，將“混合”圖像視為一種增強（而非必需）可能是您最好的選擇。

瀏覽器對 mix-blend-mode 的支持稍微好一些。 了解部分支持是件好事。 例如，Safari 不支持色調、飽和度、顏色或亮度。

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

使用 WP Engine 激發創作的自由

WP Engine 支持在 WordPress 上自由創作。 該公司的產品是所有 WordPress 提供商中速度最快的，為 150 萬種數字體驗提供支持。 世界上排名前 200,000 的站點中有更多的站點使用 WP Engine 來增強他們的數字體驗，這比 WordPress 中的任何其他站點都要多。 在 wpengine.com 上找到我們的更多信息或立即與代表交談！