[翻譯] 用 CSS 背景混合模式製作高階效果

騰訊DeepOcean原創文章：dopro.io/advanced-ef…

前端開發是否對設計師用的 Photoshop 中的圖層混合模式一點辦法都沒有，然後現在我們可以通過 CSS 來實現網頁中的圖片混合了。

 

一、前言

如果「一圖勝千言」，那多圖混合創造的效果要超過千言萬語。同理，CSS 的混合模式為設計帶來的可能性遠遠超出了你的想象。

你所聽到的 CSS 混合模式，就是三個被現代瀏覽器所廣泛支援的 CSS 屬性。這三個屬性包含了：

 

1. background-blend-mode：用於混合元素背景圖案、漸變和顏色
2. mix-blend-mode：用於元素與元素之間的混合
3. isolation：使用者阻止某些元素在mix-blend-mode 使用時被混合

 

不過，本文主要聚焦在 background-blend-mode 這個支援度最好的屬性上，它能給你帶來以往只有 Photoshop 才能做到的引人注目的效果。

二、CSS 漸變和 background-blend-mode 組合

我們使用background屬性來設定 CSS 漸變，常用的值如 linear-gradient(), radial-gradient(), repeating-linear-gradient() 以及 repeating-radial-gradient()，而且background屬性還能支援多個漸變引數，通過逗號來分隔。Lea Verou 為我們展示了通過多個漸變屬性創造的印象深刻的排列圖案，如棋盤、磚塊和星星。

但如今有了background-blend-mode 屬性，我們可以創造更多變化多樣的效果。

 

1. 光譜背景

我們通過覆蓋三層漸變來創造一個近乎全波段光譜的影像，展示再大家面前。

.spectrum-background {
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

以往實現上面的效果只能通過圖片，而且圖片體積非常的大。而通過 CSS 只需要幾行程式碼即可實現這種效果，更不用說對 HTTP 請求資料量的節省了。

2. 條紋網格背景

同樣的，通過這個屬性我們可以實現出一些有趣的條紋網格背景來：

.plaid-background {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%
       ),
       repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 25%,
            tomato 0,
            tomato 50%
        ),
        repeating-linear-gradient(
            transparent 0,
            transparent 25%,
            gold 0,
            gold 50%
        ), white;
    background-blend-mode: multiply;
    background-size: 100px 100px;
}

3. 圓圈環繞背景

再來試點別的，這次通過徑向漸變來實現圓圈環繞背景：

.circles-background {
    background:
        radial-gradient(
            khaki 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            skyblue 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            pink 40px,
            transparent 0,
            transparent 100%
        ), snow;
    background-blend-mode: multiply;
    background-size: 100px 100px;
    background-position: 0 0, 33px 33px, -33px -33px;
}

4. 更多背景

在 Yoksel 和 Una Kravets 的幫助下，我製作了一個混合模式下的漸變圖案集合，可以讓你快速的在自己的網站裡使用。

三、圖片效果和 background-blend-mode 組合

因為 background-image 允許我們在一個元素中新增多個漸變，同理我們也可以設定多張背景圖片在同一元素中。當多張圖片融合了 background-blend-mode 和 filter屬性，圖片的效果更加有趣：

1. 素描效果

我們可以通過 CSS 讓左圖的圖片看起來畫素描一樣。不需要 Photoshop、HTML canvas、WebGL 或者 JavaScript 庫，5 個 CSS 屬性就足夠了。

首先是 HTML 程式碼：

<div class=”pencil-effect”></div>

然後新增兩張 chapel.jpg 圖片：

.pencil-effect {
    background:
        url(chapel.jpg),
        url(chapel.jpg);
    background-size: cover;
}

下圖左一就是我們的第一步的效果：

現在我們為它新增一個混合模式，效果如圖二：

background-blend-mode: difference;

你會發現圖二一片漆黑，difference 這種混合模式會將兩張圖片中每個畫素點之間深色的畫素去掉。假如你依舊疑惑，我們不妨通過 background-position 和 calc() 來實現一些位置上的偏差。

background-position:
    calc(50% — 1px) calc(50% — 1px),
    calc(50% + 1px) calc(50% + 1px);

設定好兩張背景圖片的位置偏移後，現在我們可以看到圖片中景物的邊框了，如圖三所示：

最後，通過新增 filter 屬性，我們對圖片進行反相和透明度和明度調整：

filter: brightness(3) invert(1) grayscale(1);

以下是完整的程式碼片段：

.pencil-effect {
    background:
        url(photo.jpg),
        url(photo.jpg);
    background-size: cover;
    background-blend-mode: difference;
    background-position:
        calc(50% — 1px) calc(50% — 1px),
        calc(50% + 1px) calc(50% + 1px);
    filter: brightness(3) invert(1) grayscale(1);
}

最終效果如下圖四所示：