者：SbCoco來源：iCSS前端趣聞

說起 background-clip ，可能很多人都很陌生。Clip 的意思為修剪，那么從字面意思上理解，background-clip 的意思即是背景裁剪。

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

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

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

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

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

何為 -webkit-background-clip:text

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

看個(gè)最簡單的 Demo ，沒有使用 -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 - Clip[2]

使用 -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 - clip[3]

看到這里，可能有人就納悶了，

，啥玩意呢，這不就是文字設(shè)置 color 屬性嘛。

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

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

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

效果如下：

CodePen Demo - clip[4]

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

嗨起來

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

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

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

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

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

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

<div> background-clip: text</div> 

div {     font-size: 54px;     color: transparent;     background: linear-gradient(45deg, #ffeb3b, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);     background-clip: text;     animation: huerotate 3s infinite; }  @keyframes huerotate {     100% {         filter: hue-rotate(360deg);     } } 

CodePen Demo -- background-clip: text 文字漸變色[5];

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

因?yàn)橛杏玫?background 屬性，回憶一下，我在上一篇 巧妙地制作背景色漸變動(dòng)畫![6] 利用了漸變 + animation 巧妙的實(shí)現(xiàn)了一些背景的漸變動(dòng)畫?？梢院芎玫暮捅疚牡闹R(shí)結(jié)合起來。

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

<div class="text">保健沐足按摩</div> 

.text {     font-size: 80px;     background: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     background-clip: text;     color: transparent;     animation: changeColor .5s linear infinite alternate; }  @keyframes changeColor {     0% {         background-image: linear-gradient(90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     }     50% {         background-image: linear-gradient(90deg, deeppink 0, yellowgreen 15%, fuchsia 30%, lime 45%, olive 60%, aqua 75%, coral 90% ,brown 100%);     }     100% {         background-image: linear-gradient(-90deg, red 0, orange 15%, yellow 30%, green 45%, teal 60%, blue 75%, purple 90% ,purple 100%);     } } 

CodePen Demo -- 背景漸變動(dòng)畫 && 文字裁剪[7]

給文字增加高光動(dòng)畫

利用 background-clip， 我們還可以輕松的給文字增加高光動(dòng)畫。

譬如這樣：

其本質(zhì)也是利用了 background-clip，偽代碼如下：

<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p> 

p {     position: relative;     color: transparent;     background-color: #E8A95B;     background-clip: text; } p::after {     content: attr(data-text);     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%;     background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);     background-clip: text;     background-size: 150% 100%;     background-repeat: no-repeat;     animation: shine 5s infinite linear; } @keyframes shine {  0% {   background-position: 50% 0;  }  100% {   background-position: -190% 0;  } } 

去掉偽元素的 background-clip: text，就能看懂原理：

CodePen Demo -- shine Text && background-clip[8]

按鈕填充效果

運(yùn)用這個(gè)屬性，我們可以給按鈕實(shí)現(xiàn)這樣一種遮罩填充動(dòng)畫(主要是用于防止文字閃爍)：

<div class="btn">Btn</div> 

.btn {     position: relative;     color: deeppink;     background-color: transparent;     border: 3px solid deeppink;          &::after {         content: '';         position: absolute;         z-index: -1;         top: 0;         left: 50%;         height: 100%;         width: 0;         background-color: deeppink;         transition: width .5s, left .5s;     }     &:hover {         color: white;     }     &:hover::after {         top: 0;         left: 0;         width: 100%;         transition: width .5s, left .5s;     } }  .btn {     background-color: deeppink;     background-image: linear-gradient(white, white);     background-repeat: no-repeat;     background-size: 0% 100%;     background-position: center;     -webkit-background-clip: text;     -webkit-text-fill-color: transparent;     transition: background-size .5s;      &:hover {         background-size: 100% 100%;     } } 

效果如下：

CodePen Demo -- background-clip:text && 按鈕填充效果[9]

圖片窺探效果

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

CodePen Demo -- background-clip: text 遮罩圖片[10]

總結(jié)一下

其實(shí)還有很多有趣的用法，只有敢想并動(dòng)手實(shí)踐。當(dāng)然很多人會(huì)吐槽這個(gè)屬性的兼容性，到如今(2021-07-12)，兼容性已經(jīng)非常好了，主要是在使用的時(shí)候記得加上 -webkit- 前綴：

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[11] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

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

參考資料

[1]從條紋邊框的實(shí)現(xiàn)談盒子模型:

http://www.cnblogs.com/coco1s/p/5895764.html

[2]CodePen Demo - Clip:

https://codepen.io/Chokcoco/pen/WjOBzB

[3]CodePen Demo - clip:

https://codepen.io/Chokcoco/pen/eWRaVJ

[4]CodePen Demo - clip:

https://codepen.io/Chokcoco/pen/oWwRmE

[5]CodePen Demo -- background-clip: text 文字漸變色:

https://codepen.io/Chokcoco/pen/PmjMwz

[6]巧妙地制作背景色漸變動(dòng)畫!:

http://www.cnblogs.com/coco1s/p/6603403.html

[7]CodePen Demo -- 背景漸變動(dòng)畫 && 文字裁剪:

https://codepen.io/Chokcoco/pen/xdroGp

[8]CodePen Demo -- shine Text && background-clip:

https://codepen.io/Chokcoco/pen/OJbEOmb

[9]CodePen Demo -- background-clip:text && 按鈕填充效果:

https://codepen.io/Chokcoco/pen/MmoNoq

[10]CodePen Demo -- background-clip: text 遮罩圖片:

https://codepen.io/Chokcoco/pen/LyNmQv

[11]Github -- iCSS:

https://github.com/chokcoco/iCSS