說起 background-clip ，可能很多人都很陌生。Clip 的意思為修剪，那麼從字面意思上理解，background-clip 的意思即是背景裁剪。
我曾經在 從條紋邊框的實現談盒子模型 一文中談到了這個屬性，感興趣的可以回頭看看。
簡單而言，background-clip 的作用就是設定元素的背景（背景圖片或顏色）的填充規則。
與 box-sizing 的取值非常類似，通常而言，它有 3 個取值：
|
1 2 3 4 5 |
{ background-clip: border-box; // 背景延伸到邊框外沿（但是在邊框之下） background-clip: padding-box; // 邊框下面沒有背景，即背景延伸到內邊距外沿。 background-clip: content-box; // 背景裁剪到內容區 (content-box) 外沿。 } |
不過這些都不是本文的主角。本文的主角是 background-clip: text; ，當然現在只有 chrome 支援，所以通常想使用它，需要 -webkit-background-clip:text;。
何為 -webkit-background-clip:text
使用了這個屬性的意思是，以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。
看個最簡單的 Demo ，沒有使用 -webkit-background-clip:text :
|
1 2 3 4 5 6 7 8 9 10 11 |
<div>Clip</div> <style> div { font-size: 180px; font-weight: bold; color: deeppink; background: url($img) no-repeat center center; background-size: cover; } </style> |
效果如下：
See the Pen background-clip:text by Chokcoco (@Chokcoco) on CodePen.
使用 -webkit-background-clip:text
我們稍微改造下上面的程式碼，新增 -webkit-background-clip:text：
|
1 2 3 4 5 6 7 8 |
div { font-size: 180px; font-weight: bold; color: deeppink; background: url($img) no-repeat center center; background-size: cover; -webkit-background-clip: text; } |
效果如下：
See the Pen background-clip:text by Chokcoco (@Chokcoco) on CodePen.
看到這裡，可能有人就納悶了，
啥玩意呢，這不就是文字設定 color 屬性嘛。
將文字設為透明 color: transparent
別急！當然還有更有意思的，上面由於文字設定了顏色，擋住了 div 塊的背景，如果將文字設定為透明呢？文字是可以設定為透明的 color: transparent 。
|
1 2 3 4 |
div { color: transparent; -webkit-background-clip: text; } |
效果如下(請在 Chrome 核心瀏覽器下觀看)：
See the Pen clip:text && color: transparent by Chokcoco (@Chokcoco) on CodePen.
通過將文字設定為透明，原本 div 的背景就顯現出來了，而文字以為的區域全部被裁剪了，這就是 -webkit-background-clip:text 的作用。
各類效果製作
瞭解了最基本的用法，接下來可以想想如何去運用這個元素製作一些效果。
- 大大增強了文字的顏色填充選擇
- 文字顏色的動畫效果
- 配合其他元素，實現一些其他巧妙的用法
實現文字漸變效果
利用這個屬性，我們可以十分便捷的實現文字的漸變色效果。
效果如下(請在 Chrome 核心瀏覽器下觀看)：
See the Pen background-clip: text 文字漸變色 by Chokcoco (@Chokcoco) on CodePen.
背景漸變動畫 && 文字裁剪
因為有用到 background 屬性，回憶一下，我在上一篇 巧妙地製作背景色漸變動畫！ 利用了漸變 + animation 巧妙的實現了一些背景的漸變動畫。可以很好的和本文的知識結合起來。
結合漸變動畫，當然不一定需要過渡動畫，這裡我使用的是逐幀動畫。配合 -webkit-background-clip:text，實現了一種，嗯，很紅燈區的感覺。
效果如下(請在 Chrome 核心瀏覽器下觀看)：
See the Pen 背景漸變動畫 && 文字裁剪 by Chokcoco (@Chokcoco) on CodePen.
圖片窺探效果
再演示其中一個用法，利用兩個 div 層一起使用，設定相同的背景圖片，父 div 層設定圖片模糊，其中子 div 設定 -webkit-background-clip:text，然後利用 animation 移動子 div ，去窺探圖片。
效果如下(請在 Chrome 核心瀏覽器下觀看)：
See the Pen background-clip: text by Chokcoco (@Chokcoco) on CodePen.
其實還有很多有趣的用法，只要敢想並動手實踐，會發現 CSS 真的樂趣挺多的。
當然很多人會吐槽這個屬性的相容性，確實，我個人覺得前端現在的生態有一點面向未來程式設計的感覺（調戲）。不過提前掌握總體而言利大於弊，多多拓寬自己的視野。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
開本系列，談談一些有趣的 CSS 題目，題目型別天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
所有題目彙總在我的 Github 。
- 有趣的CSS題目（1）： 左邊豎條的實現方法
- 有趣的CSS題目（2）： 從條紋邊框的實現談盒子模型
- 有趣的CSS題目（3）： 層疊順序與堆疊上下文知多少
- 有趣的CSS題目（4）： 從倒影說起，談談 CSS 繼承 inherit
- 有趣的CSS題目（5）： 單行居中，兩行居左，超過兩行省略
- 有趣的CSS題目（6）： 全相容的多列均勻佈局問題
- 有趣的CSS題目（7）：消失的邊界線問題
- 有趣的CSS題目（8）：純CSS的導航欄Tab切換方案
- 有趣的CSS題目（9）：巧妙實現 CSS 斜線
- 有趣的CSS題目（10）：結構性偽類選擇器
- 有趣的CSS題目（11）：reset.css 知多少？
- 有趣的CSS題目（12）：你該知道的字型 font-family
- 有趣的CSS題目（13）：巧妙地製作背景色漸變動畫！
- 有趣的CSS題目（14）： 純 CSS 方式實現 CSS 動畫的暫停與播放！
- 有趣的CSS題目（15）： 談談 CSS 關鍵字 initial、inherit 和 unset
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
