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

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

前端開發是否對設計師用的 Photoshop 中的圖層混合模式一點辦法都沒有，而後如今咱們能夠經過 CSS 來實現網頁中的圖片混合了。

 

1、前言

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

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

 

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

 

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

2、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 的幫助下，我製做了一個混合模式下的漸變圖案 集合，可讓你快速的在本身的網站裏使用。

3、圖片效果和 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);
}

最終效果以下圖四所示：

2. 黑板效果

基於上面的素描效果，咱們經過調整一個 CSS 屬性便可實現上圖二的黑板報效果，把 filter 屬性直接設置爲 invert(1) 便可。

 

3. 夜視效果

接下來經過 CSS 混合模式讓圖片看起來像經過夜視儀觀察到的效果。首先設置好背景圖片和相關樣式（圖一所示）：

background: url(moose.jpg);
background-size: cover;
background-position: center;

如今咱們假如漸變和混合模式，這裏加入的是一個具備必定透明度的黑色徑向漸變：

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    );
background-blend-mode: overlay;

還不錯，但能夠繼續優化。我有一些辦法可讓圖片看起來更加可信，經過加入一些掃描線到圖片上並重復平鋪（如圖三）：

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    ),
    repeating-linear-gradient(
        transparent 0,
        rgba(0,0,0,.2) 3px,
        transparent 6px
    );

完整代碼以下：

.night-vision-effect {
    background:
        url(moose.jpg),
        radial-gradient(
            rgba(0,255,0,.8),
            black
        ),
        repeating-linear-gradient(
            transparent 0,
            rgba(0,0,0,.2) 3px,
            transparent 6px
        );
    background-blend-mode: overlay;
    background-size: cover;
 }

4、瀏覽器兼容和優雅降級

好消息是  background-blend-mode 在 Firefox、Chrome 和 Opera 上兼容性良好。同時 Safari 中一樣支持上述咱們所列舉的全部效果，目前 Safari 不支持的混合模式有：  saturation,  hue,  color以及  luminosity。而 IE 瀏覽器則所有不支持。

這意味着咱們須要考慮不支持混合模式的瀏覽器，經過 CSS 的 @supports 可讓這件事更加簡單。第一個案例咱們能夠經過 @supports 檢測混合模式支持度，並在不支持的時候作一個降級：

.spectrum-background {
    background: gray;

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

咱們也能夠檢測多個 CSS 屬性，以下：

.pencil-effect {
    background-image: url(photo.jpg);
    background-size: cover;

@supports (background-blend-mode: difference) and (filter: invert(1)) { background-image: url(photo.jpg), url(photo.jpg); 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); } }

最後咱們就能夠放心的使用混合模式，給網頁圖片帶來更多想象空間。

 

本文翻譯自 logrocket ：blog.logrocket.com/advanced-ef…

歡迎關注"騰訊DeepOcean"微信公衆號,每週爲你推送前端、人工智能、SEO/ASO等領域相關的原創優質技術文章：

看小編搬運這麼辛苦，關注一個唄：)