用純CSS實(shí)現(xiàn)鏤空結(jié)果的示例代碼

邇來研究了一下鏤空結(jié)果。

background-clip: text

背景被裁剪為筆墨的前景色。第一次是在 CSS-Tricks 看到的這個(gè)用法: 在 CSS-Tricks 網(wǎng)站上，這個(gè)玩意用得到處都是。

如許，做簡單的圖片背景鏤空結(jié)果便不再困難了。關(guān)鍵代碼只有幾行。

.wrapper {
  /* ... */
  background-image: url("/path/to/your/image");
  background-clip: text; /* ! */
  color: transparent;    /* ! */
}

就這幾行，視覺上會(huì)就會(huì)有大轉(zhuǎn)變。前后對(duì)比：

另外，這里有個(gè)比上面更實(shí)用的Demo

background-clip 既然是“background”家族的，那它天生和圖片、漸變打的交道多。不過，我們做鏤空總不會(huì)都是圖片、漸變這種吧。假如我們想做視頻、筆墨，甚至更復(fù)雜的 DOM 元素的鏤空結(jié)果呢？

單刀直入： CSS mask 屬性

這應(yīng)該是最直接能想到的方法了。畢竟名字里就帶個(gè)“mask”，誰能忽略呢？

CSS mask-* 系列屬性是在 CSS Masking Module Level 1 中定義的。這個(gè)規(guī)范也定義了為許多人熟知的 clip 和 clip-path 屬性，換句話說，這個(gè)CSS 模塊包括遮罩和剪裁兩部分。

第一個(gè)例子

雖然是一個(gè)新的屬性，但設(shè)置 mask 屬性并不難。下面就是我們的第一個(gè)例子。

<div class="masked" />

.masked {
  height: 100px;
  width: 100px;
  background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
  mask: url("https://github.githubassets.com/pinned-octocat.svg");
}

就是下面的結(jié)果啦。

上面的用法照舊很簡單的，我們指定了一個(gè) mask 參數(shù)，它的值是一張 從GitHub盜的 SVG圖片。于是多彩的漸變就被 裁剪 遮罩成了那只聞名的貓。

mask-* 大家族

mask 屬性現(xiàn)實(shí)上是諸多 mask-* 的縮寫:

mask-image
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
-
mask-type
mask-composite
mask-mode

有沒有 background-* 的即視感？沒錯(cuò)，里面的不少屬性都是和 backgorund / border 同等的，而且它們的作用也是同等的，只不過 background-* 用在背景上，而 mask-* 用在遮罩層上而已——用在背景上的奇技淫巧搬到 mask 的世界里還能接著用！比如實(shí)現(xiàn)如許的結(jié)果：

.masked {
  height: /* ... */;
  width: /* ... */;
  background: /* ... */;
  mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
  mask-size: 5em;
  mask-position: center;
  /* 假如你心情好，加個(gè)動(dòng)畫也沒題目的 */
}

進(jìn)一步控制遮罩結(jié)果

可能讀者已經(jīng)發(fā)現(xiàn)了， mask-* 家族里有幾張生面孔。這也好理解： mask 這么壯大的特征，完完全全地抄 background-* 豈不可惜了。

mask-mode

mask-mode 用來指定詳細(xì)的遮罩體例。

mask-type CSS 屬性設(shè)置 mask-image 被用于“亮度型”的遮罩照舊“不透明度”型的遮罩。 mask-mode: alaph 透露表現(xiàn)使用不透明度（即alaph通道）作為 mask value， mask-mode: luminance 透露表現(xiàn)使用亮度值作為 mask value。

那，遮罩值 / mask value 又是什么？mask value 透露表現(xiàn)被遮罩的元素被遮罩的程度。mask value 越大，被遮罩區(qū)域會(huì)更偏向于表現(xiàn)，mask value 最大的時(shí)候，那個(gè)區(qū)域就完全不透明了。舉個(gè)例子：

<div class="mode">ABCDEFG</div>

.mode {
  height: 200px;
  width: 300px;
  /* and more */
  mask-image: linear-gradient(to left, black, yellow);
  mask-mode: luminance; /* or alaph ? */
}

左邊是遮罩圖片，中心是 luminance 右邊使用 alaph 。這里的圖片是不透明的，所以將一個(gè)恒不透明的圖片在 alaph 模式下作為遮罩，其效果是沒有遮罩結(jié)果。但是圖片是有亮度轉(zhuǎn)變的，所以 luminance 下的被遮罩元素就呈現(xiàn)出透明度的轉(zhuǎn)變了。

一樣平常 luminance 模式慢一點(diǎn)點(diǎn)，由于每一個(gè)像素點(diǎn)的亮度值必要根據(jù) RGB 三個(gè)通道的值計(jì)算出來。

mask-composite

指定當(dāng)有多個(gè)遮罩圖片疊加起來的時(shí)候，如何處理遮罩結(jié)果。一些屬性值的結(jié)果依靠于 mask-image 的層級(jí)次序。

用MDN 提供的這個(gè) CodePen 來感受一下

關(guān)于 mask 的知識(shí)就講到這里，更詳細(xì)更正確的說明照舊 要到 MDN 看一看 。

混合模式

這應(yīng)該是最為神奇的一種方法了。使用PS的時(shí)候，經(jīng)常會(huì)看見“混合模式”這個(gè)詞。還記得多年前我初次使用 Photoshop 的時(shí)候還很好奇“混合模式”是什么東西，頓時(shí)讓我對(duì) Photoshop 充滿了敬畏之情。不過，昔時(shí)的敬畏歸敬畏，如今這里說的“混合模式”照舊蠻好理解的。

所謂的“混合模式”，是指當(dāng)一種當(dāng)層重疊時(shí)計(jì)算像素最終顏色值的方法。每種混合模式接收前景顏色值和背景顏色值（分別為頂部顏色和底部顏色）作為輸入，實(shí)行一些計(jì)算并輸出最后要表現(xiàn)在屏幕上的顏色值。最終的可見的顏色是對(duì)層中的每個(gè)重疊像素實(shí)行混合模式計(jì)算所得的效果。 說白了，混合模式確定了把一層疊加到另一層上去會(huì)得到什么效果。

在 CSS 中，可以使用 mix-blend-mode 來指定混合模式。

你可能會(huì)問了，平時(shí)也沒有效什么“混合模式”這種東西，所以 blend-mode 的默認(rèn)值是 none 嗎？可不是。其實(shí)，這種最常見的 上層把基層“遮住”了的情況也屬于一種混合模式，叫 normal ，它本質(zhì)上是一種只保留前景顏色值而完全拋棄背景顏色值的混合模式。

這里我們只討論實(shí)現(xiàn)鏤空結(jié)果用到的混合模式 —— screen 。這種混合模式有一個(gè)特征，前景層是黑色導(dǎo)致最終可見的顏色直接是背景層的顏色，前景層是白色導(dǎo)致最終可見的顏色直接是白色。

信賴你已經(jīng)搞不曉暢這和鏤空有什么關(guān)系了，下面舉個(gè)例子看一下。

如今，我們有一個(gè) <video> ，以及一個(gè)“白底黑字”的Logo浮層。

我們?cè)诟涌蛏霞由舷旅娴?CSS：

.logo {
    /* ... ... */
    mix-blend-mode: screen;
}

就變成了下面的樣子：

去這個(gè) Demo，看詳細(xì)代碼和結(jié)果

齒輪圖標(biāo)確實(shí)是變?yōu)殓U空的了。不過，為什么呢？

先來明確一件事：把浮層置于視頻之上，浮層是“前景”，視頻是“背景”。先來看浮層的白色部分，由于把白色置于任何顏色之上都得到白色，所以白色部分被保留；而由于黑色置于任何顏色之上都得到基層的顏色，所以黑色部分呈現(xiàn)鏤空結(jié)果。

但是如許的實(shí)現(xiàn)比較 Hack，由于這里只使用了詬誶兩色，假如使用其它的顏色作為浮層的 background-color ，得到的就不會(huì)像是鏤空的結(jié)果了，這時(shí)照舊得請(qǐng)上面的 mask 家族出場(chǎng)。不過，單單對(duì)于白底的情況， mix-blend-mode 不失為一個(gè)可行的解法。

以上就是本文的悉數(shù)內(nèi)容，盼望對(duì)大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。