CSS中的混合模式，製做高級特效的必備技巧

做者： Ahmad Shaeed 譯者：前端小智 來源：css-tricks

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

什麼是混合？

根據維基百科：

數字圖像編輯和計算機圖形中的混合模式(或混合模式)用於肯定兩個圖層如何相互混合。在大多數應用程序中，默認的混合模式只是經過用頂層的內容覆蓋底層來隱藏底層。

在CSS中，有兩個屬性負責混合。 mix-blend-mode用於混合DOM元素，background-blend-mode用於組合多個CSS背景。

進入mix-Blend-Mode

基礎範例

咱們以一個基本的例子來看一下它是如何工做的。 個人標題上方有一個圓圈。 我要作的是將文本與圓混合。

HTML

<div class="circle"></div>
<p>Blend Me</p>
複製代碼

CSS

爲文本元素添加了mix-blend-mode: overlay，從而將其與圓混合。

事例源碼：codepen.io/shadeed/pen…

帶文字的圖片

我認爲這是一個普遍使用的混合模式。文字在上面，圖片在下面。

在標題中添加了如下內容：

.hero-title {
    color: #000;
    mix-blend-mode: overlay;
}
複製代碼

不只僅是改變混合模式。 例如，咱們能夠經過建立動畫來提升創意。

在此示例中，我想探討文本如何與樹葉背景融合。 因爲圖像中包含暗點和亮點，所以在使文本看起來像在每片葉子下移動同樣，這將起到很是有用的做用。

事例源碼：codepen.io/shadeed/pen…

帶有SVG圖形的文本

個有趣的效果是在帶有矢量和形狀的背景上有一個標題。 當形狀的顏色不一樣時，它會變得更加有趣。

咱們能用這些斑點形狀作什麼?我使用MorphSVG插件改變每一個博客形狀的路徑。這產生了一個有趣的結果。

事例源碼：codepen.io/shadeed/pen…

混合真實元素

吸引我眼球的效果是當元素有白色背景和黑色前景使用mix-blend-mode: screen。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

放大鏡類

我使用了SVG，並對其應用瞭如下內容。 注意使用屏幕時黑色區域如何變爲透明。

事例源碼：codepen.io/shadeed/pen…

視頻封面

對我來講，這是一個很是有用的用例。 我常常須要添加播放圖標以指示文章中有視頻，所以我最終使用了從中心透明的SVG。

這聽起來彷佛正確，但有必定侷限性。 若是要添加懸停效果以填充三角形怎麼辦？ 因爲在SVG中減去了形狀，所以這是不可能的。 一種解決方法是在SVG後面放置一個圓圈，並在懸停時對其進行着色。

對我來講，這還不夠。我也想反過來，三角形必須是白色的，其他的是藍色的。

多虧了混合模式，我能夠經過在懸停時控制嵌入式SVG快速實現改效果。

.article__play {
    mix-blend-mode: screen;  
}

.article:hover .article__play {
    mix-blend-mode: normal;
}

.article:hover .article__play {
    .play__base {
      fill: #005FFF;
    }
    
    .play__icon {
      fill: #fff;
    }
}
複製代碼

事例源碼：codepen.io/shadeed/pen…

儲值卡

另外一種狀況是使用裁切圖像並將其與其下方的背景融合，結果很是有趣。

img {
    position: absolute;
    right: -15px;
    top: 0;
    width: 110px;
    mix-blend-mode: screen;
}
複製代碼

這個想法是把圖片放在右邊，左邊有標題和描述。

一樣，經過爲每張卡添加多個背景能夠更好:

事例源碼：codepen.io/shadeed/pen…

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

從徽標背景中刪除白色

我在Photoshop的早期就知道這個技巧。有時，我須要一個品牌的標誌，它是很可貴到一個透明的PNG版本。使用混合模式，這很容易解決。

我模擬了Facebook和Amazon徽標，並在每一個徽標下添加了白色背景。

如今來解決這個問題，添加了如下CSS：

img {
    mix-blend-mode: multiply;
    filter: contrast(2);
}
複製代碼

注意，我添加了filter: contrast(2)來增長徽標的對比度。應用混合效果使他們比原來的顏色深一點。

問題已解決！ 固然，我不建議使用此功能。 可是，若是我被迫這麼作，我將使用它來節省時間，當原始徽標到達時，我能夠替換它並消除混合效果。

事例源碼：codepen.io/shadeed/pen…

Isolation

isolation CSS屬性定義該元素是否必須建立一個新的層疊上下文（stacking context）。

該屬性的主要做用是當和background-blend-mode屬性一塊兒使用時，能夠只混合一個指定元素棧的背景：它容許使一組元素從它們後面的背景中獨立出來，只混合這組元素的背景。

html

<div>
  <span>CSS is Awesome</span>
</div>
複製代碼

css

div {
  isolation: isolate; /* Creates a new stacking context */
}

span {
    mix-blend-mode: difference;
}
複製代碼

如你所見，文本「 CSS很棒」僅在其父代的邊界內融合。 外面的東西不會混在一塊兒。 換句話說，它是孤立的。

事例源碼：codepen.io/shadeed/pen…

isolation 能夠經過使用建立新的堆棧上下文的屬性來實現。例如，若是父元素具備opacity 屬性，這將影響結果。

html

<div>
  <img src="cake.jpg" alt="">
</div>
複製代碼

css

div {
  opacity: 0.99; /* Creates a new stacking context, which result to an isolated group */
}

img {
  mix-blend-mode: difference;
}
複製代碼

事例源碼：codepen.io/shadeed/pen…

進入Background-Blend-Mode

它的工做方式相似mix-blend-mode，但具備多個背景圖像。 每一個背景能夠有本身的混合模式，舉個例子。

在此示例中，將三層混合在一塊兒：基礎圖像，實心填充(Solid Fill)和漸變填充(radient Fill.)。

.elem {
    background: linear-gradient(45deg, #000 10%, transparent), 
              linear-gradient(#3754C7, #3754C7), 
              url(nature.jpg);
  background-size: cover;
  background-blend-mode: overlay, color;
}
複製代碼

在CSS中，應該以正確的方式對每一個背景進行排序。 堆疊順序從上到下，如上圖所示。

事例源碼：codepen.io/shadeed/pen…

着色圖像

經過使用徑向梯度，有一些有趣的結果比有用。這個想法是添加一個彩色的圖像，使它與它混合。

:root {
  --color: #000;
  --size: 250px; /* Gradient Size */
}

.elem-1 {
  background: radial-gradient(circle var(--size) at center, transparent, var(--color)), 
              url(nature.jpg);
}
複製代碼

經過對元素應用background-blend-mode: color，結果是圖像的去飽和版本。

事例源碼：codepen.io/shadeed/pen…

瀏覽器支持

---

原文：css-tricks.com/basics-css-…

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。