CSS中的混合模式的示例分析

Blend Me

「CSS」

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

事例源碼：https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100

帶文字的圖片

我認(rèn)為這是一個(gè)廣泛使用的混合模式。文字在上面，圖片在下面。

在標(biāo)題中添加了以下內(nèi)容：

.hero-title {
    color: #000;
    mix-blend-mode: overlay;
}

不僅僅是改變混合模式。例如，我們可以通過創(chuàng)建動(dòng)畫來提高創(chuàng)意。

在此示例中，我想探討文本如何與樹葉背景融合。由于圖像中包含暗點(diǎn)和亮點(diǎn)，因此在使文本看起來像在每片葉子下移動(dòng)一樣，這將起到非常有用的作用。

事例源碼：https://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=0100

帶有SVG圖形的文本

個(gè)有趣的效果是在帶有矢量和形狀的背景上有一個(gè)標(biāo)題。當(dāng)形狀的顏色不同時(shí)，它會(huì)變得更加有趣。

我們能用這些斑點(diǎn)形狀做什么?我使用MorphSVG插件改變每個(gè)博客形狀的路徑。這產(chǎn)生了一個(gè)有趣的結(jié)果。

事例源碼：https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010

混合真實(shí)元素

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

放大鏡類

我使用了SVG，并對(duì)其應(yīng)用了以下內(nèi)容。注意使用屏幕時(shí)黑色區(qū)域如何變?yōu)橥该鳌?/p>

事例源碼：https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100

視頻封面

對(duì)我來說，這是一個(gè)非常有用的用例。我經(jīng)常需要添加播放圖標(biāo)以指示文章中有視頻，因此我最終使用了從中心透明的SVG。

這聽起來似乎正確，但有一定局限性。如果要添加懸停效果以填充三角形怎么辦？由于在SVG中減去了形狀，因此這是不可能的。一種解決方法是在SVG后面放置一個(gè)圓圈，并在懸停時(shí)對(duì)其進(jìn)行著色。

對(duì)我來說，這還不夠。我也想反過來，三角形必須是白色的，其余的是藍(lán)色的。

多虧了混合模式，我可以通過在懸停時(shí)控制嵌入式SVG快速實(shí)現(xiàn)改效果。

.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;
    }
}

事例源碼：https://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=0100

儲(chǔ)值卡

另一種情況是使用裁切圖像并將其與其下方的背景融合，結(jié)果非常有趣。

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

這個(gè)想法是把圖片放在右邊，左邊有標(biāo)題和描述。

同樣，通過為每張卡添加多個(gè)背景可以更好:

事例源碼：https://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=1000

從徽標(biāo)背景中刪除白色

我在Photoshop的早期就知道這個(gè)技巧。有時(shí)，我需要一個(gè)品牌的標(biāo)志，它是很難得到一個(gè)透明的PNG版本。使用混合模式，這很容易解決。

我模擬了Facebook和Amazon徽標(biāo)，并在每個(gè)徽標(biāo)下添加了白色背景。

現(xiàn)在來解決這個(gè)問題，添加了以下CSS：

img {
    mix-blend-mode: multiply;
    filter: contrast(2);
}

注意，我添加了filter: contrast(2)來增加徽標(biāo)的對(duì)比度。應(yīng)用混合效果使他們比原來的顏色深一點(diǎn)。

問題已解決！當(dāng)然，我不建議使用此功能。但是，如果我被迫這么做，我將使用它來節(jié)省時(shí)間，當(dāng)原始徽標(biāo)到達(dá)時(shí)，我可以替換它并消除混合效果。

事例源碼：https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100

Isolation

isolation CSS屬性定義該元素是否必須創(chuàng)建一個(gè)新的層疊上下文（stacking context）。

該屬性的主要作用是當(dāng)和background-blend-mode屬性一起使用時(shí)，可以只混合一個(gè)指定元素棧的背景：它允許使一組元素從它們后面的背景中獨(dú)立出來，只混合這組元素的背景。

「html」

  CSS is Awesome

「css」

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

span {
    mix-blend-mode: difference;
}

如你所見，文本“ CSS很棒”僅在其父代的邊界內(nèi)融合。外面的東西不會(huì)混在一起。換句話說，它是孤立的。

事例源碼：https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100

isolation 可以通過使用創(chuàng)建新的堆棧上下文的屬性來實(shí)現(xiàn)。例如，如果父元素具有opacity 屬性，這將影響結(jié)果。

「html」

「css」

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

img {
  mix-blend-mode: difference;
}

事例源碼：https://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=0100

進(jìn)入Background-Blend-Mode

它的工作方式類似mix-blend-mode，但具有多個(gè)背景圖像。每個(gè)背景可以有自己的混合模式，舉個(gè)例子。

在此示例中，將三層混合在一起：基礎(chǔ)圖像，實(shí)心填充(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中，應(yīng)該以正確的方式對(duì)每個(gè)背景進(jìn)行排序。堆疊順序從上到下，如上圖所示。

事例源碼：https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100

著色圖像

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

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

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

通過對(duì)元素應(yīng)用background-blend-mode: color，結(jié)果是圖像的去飽和版本。

事例源碼：https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8

「瀏覽器支持」

看完了這篇文章，相信你對(duì)“CSS中的混合模式的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！