開(kāi)本系列，談?wù)勔恍┯腥さ?CSS?題目，題目類型天馬行空，想到什么說(shuō)什么，不僅為了拓寬一下解決問(wèn)題的思路，更涉及一些容易忽視的 CSS 細(xì)節(jié)。

解題不考慮兼容性，題目天馬行空，想到什么說(shuō)什么，如果解題中有你感覺(jué)到生僻的 CSS 屬性，趕緊去補(bǔ)習(xí)一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說(shuō)三遍。

談?wù)勔恍┯腥さ腃SS題目（一）-- 左邊豎條的實(shí)現(xiàn)方法

談?wù)勔恍┯腥さ腃SS題目（二）-- 從條紋邊框的實(shí)現(xiàn)談盒子模型

談?wù)勔恍┯腥さ腃SS題目（三）-- 層疊順序與堆棧上下文知多少

談?wù)勔恍┯腥さ腃SS題目（四）-- 從倒影說(shuō)起，談?wù)?CSS 繼承 inherit

談?wù)勔恍┯腥さ腃SS題目（五）-- 單行居中，兩行居左，超過(guò)兩行省略

談?wù)勔恍┯腥さ腃SS題目（六）-- 全兼容的多列均勻布局問(wèn)題

談?wù)勔恍┯腥さ腃SS題目（七）-- 消失的邊界線問(wèn)題

談?wù)勔恍┯腥さ腃SS題目（八）-- 純CSS的導(dǎo)航欄Tab切換方案

談?wù)勔恍┯腥さ腃SS題目（九）-- 巧妙的實(shí)現(xiàn) CSS 斜線

談?wù)勔恍┯腥さ腃SS題目（十）-- 結(jié)構(gòu)性偽類選擇器

談?wù)勔恍┯腥さ腃SS題目（十一）-- reset.css知多少

談?wù)勔恍┯腥さ腃SS題目（十二）--?深入探討 CSS 特性檢測(cè) @supports 與 Modernizr

談?wù)勔恍┯腥さ腃SS題目（十三）--?巧妙地制作背景色漸變動(dòng)畫(huà)！

談?wù)勔恍┯腥さ腃SS題目（十四）-- 純 CSS 方式實(shí)現(xiàn) CSS 動(dòng)畫(huà)的暫停與播放！

談?wù)勔恍┯腥さ腃SS題目（十五）--?談?wù)?CSS 關(guān)鍵字 initial、inherit 和 unset

所有題目匯總在我的?Github?。

正文從這里開(kāi)始。說(shuō)起?background-clip?，可能很多人都很陌生。Clip 的意思為修剪，那么從字面意思上理解，background-clip?的意思即是背景裁剪。

我曾經(jīng)在?從條紋邊框的實(shí)現(xiàn)談盒子模型?一文中談到了這個(gè)屬性，感興趣的可以回頭看看。

簡(jiǎn)單而言，background-clip?的作用就是設(shè)置元素的背景（背景圖片或顏色）的填充規(guī)則。

與?box-sizing?的取值非常類似，通常而言，它有 3 個(gè)取值：

{background-clip: border-box; // 背景延伸到邊框外沿（但是在邊框之下）background-clip: padding-box; // 邊框下面沒(méi)有背景，即背景延伸到內(nèi)邊距外沿。background-clip: content-box; // 背景裁剪到內(nèi)容區(qū) (content-box) 外沿。 }

不過(guò)這些都不是本文的主角。本文的主角是?background-clip: text;?，當(dāng)然現(xiàn)在只有 chrome 支持，所以通常想使用它，需要?-webkit-background-clip:text;。

?

何為?-webkit-background-clip:text

使用了這個(gè)屬性的意思是，以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。

看個(gè)最簡(jiǎn)單的 Demo ，沒(méi)有使用?-webkit-background-clip:text?:

<div>Clip</div><style> div {font-size: 180px;font-weight: bold;color: deeppink;background: url($img) no-repeat center center;background-size: cover; } </style>

效果如下：

CodePen Demo

?

使用?-webkit-background-clip:text

我們稍微改造下上面的代碼，添加?-webkit-background-clip:text：

div {font-size: 180px;font-weight: bold;color: deeppink;background: url($img) no-repeat center center;background-size: cover;-webkit-background-clip: text; }

效果如下：

CodePen Demo

看到這里，可能有人就納悶了，啥玩意呢，這不就是文字設(shè)置?color?屬性嘛。

?

將文字設(shè)為透明?color: transparent

別急！當(dāng)然還有更有意思的，上面由于文字設(shè)置了顏色，擋住了 div 塊的背景，如果將文字設(shè)置為透明呢？文字是可以設(shè)置為透明的?color: transparent?。

div {color: transparent;-webkit-background-clip: text; }

效果如下(請(qǐng)?jiān)?Chrome 內(nèi)核瀏覽器下觀看)：

CodePen Demo

通過(guò)將文字設(shè)置為透明，原本 div 的背景就顯現(xiàn)出來(lái)了，而文字以為的區(qū)域全部被裁剪了，這就是?-webkit-background-clip:text?的作用。

?

各類效果制作

了解了最基本的用法，接下來(lái)可以想想如何去運(yùn)用這個(gè)元素制作一些效果。

大大增強(qiáng)了文字的顏色填充選擇

文字顏色的動(dòng)畫(huà)效果

配合其他元素，實(shí)現(xiàn)一些其他巧妙的用法

?

實(shí)現(xiàn)文字漸變效果

利用這個(gè)屬性，我們可以十分便捷的實(shí)現(xiàn)文字的漸變色效果。

效果如下(請(qǐng)?jiān)?Chrome 內(nèi)核瀏覽器下觀看)：

CodePen Demo

?

背景漸變動(dòng)畫(huà) && 文字裁剪

因?yàn)橛杏玫?background?屬性，回憶一下，我在上一篇?巧妙地制作背景色漸變動(dòng)畫(huà)！?利用了漸變?+?animation?巧妙的實(shí)現(xiàn)了一些背景的漸變動(dòng)畫(huà)。可以很好的和本文的知識(shí)結(jié)合起來(lái)。

結(jié)合漸變動(dòng)畫(huà)，當(dāng)然不一定需要過(guò)渡動(dòng)畫(huà)，這里我使用的是逐幀動(dòng)畫(huà)。配合?-webkit-background-clip:text，實(shí)現(xiàn)了一種，嗯，很紅燈區(qū)的感覺(jué)。

效果如下(請(qǐng)?jiān)?Chrome 內(nèi)核瀏覽器下觀看)：?

CodePen Demo

?

圖片窺探效果

再演示其中一個(gè)用法，利用兩個(gè) div 層一起使用，設(shè)置相同的背景圖片，父 div 層設(shè)置圖片模糊，其中子 div 設(shè)置?-webkit-background-clip:text，然后利用?animation?移動(dòng)子 div ，去窺探圖片。

效果如下(請(qǐng)?jiān)?Chrome 內(nèi)核瀏覽器下觀看)：

CodePen Demo

?

其實(shí)還有很多有趣的用法，只要敢想并動(dòng)手實(shí)踐，會(huì)發(fā)現(xiàn) CSS 真的樂(lè)趣挺多的。

當(dāng)然很多人會(huì)吐槽這個(gè)屬性的兼容性，確實(shí)，我個(gè)人覺(jué)得前端現(xiàn)在的生態(tài)有一點(diǎn)面向未來(lái)編程的感覺(jué)（調(diào)戲）。不過(guò)提前掌握總體而言利大于弊，多多拓寬自己的視野。

到此本文結(jié)束，如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

總結(jié)

以上是生活随笔為你收集整理的谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。