谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
開本系列,談?wù)勔恍┯腥さ?CSS?題目,題目類型天馬行空,想到什么說什么,不僅為了拓寬一下解決問題的思路,更涉及一些容易忽視的 CSS 細(xì)節(jié)。
解題不考慮兼容性,題目天馬行空,想到什么說什么,如果解題中有你感覺到生僻的 CSS 屬性,趕緊去補(bǔ)習(xí)一下吧。
不斷更新,不斷更新,不斷更新,重要的事情說三遍。
談?wù)勔恍┯腥さ腃SS題目(一)-- 左邊豎條的實現(xiàn)方法
談?wù)勔恍┯腥さ腃SS題目(二)-- 從條紋邊框的實現(xiàn)談盒子模型
談?wù)勔恍┯腥さ腃SS題目(三)-- 層疊順序與堆棧上下文知多少
談?wù)勔恍┯腥さ腃SS題目(四)-- 從倒影說起,談?wù)?CSS 繼承 inherit
談?wù)勔恍┯腥さ腃SS題目(五)-- 單行居中,兩行居左,超過兩行省略
談?wù)勔恍┯腥さ腃SS題目(六)-- 全兼容的多列均勻布局問題
談?wù)勔恍┯腥さ腃SS題目(七)-- 消失的邊界線問題
談?wù)勔恍┯腥さ腃SS題目(八)-- 純CSS的導(dǎo)航欄Tab切換方案
談?wù)勔恍┯腥さ腃SS題目(九)-- 巧妙的實現(xiàn) CSS 斜線
談?wù)勔恍┯腥さ腃SS題目(十)-- 結(jié)構(gòu)性偽類選擇器
談?wù)勔恍┯腥さ腃SS題目(十一)-- reset.css知多少
談?wù)勔恍┯腥さ腃SS題目(十二)--?深入探討 CSS 特性檢測 @supports 與 Modernizr
談?wù)勔恍┯腥さ腃SS題目(十三)--?巧妙地制作背景色漸變動畫!
談?wù)勔恍┯腥さ腃SS題目(十四)-- 純 CSS 方式實現(xiàn) CSS 動畫的暫停與播放!
談?wù)勔恍┯腥さ腃SS題目(十五)--?談?wù)?CSS 關(guān)鍵字 initial、inherit 和 unset
所有題目匯總在我的?Github?。
正文從這里開始。說起?background-clip?,可能很多人都很陌生。Clip 的意思為修剪,那么從字面意思上理解,background-clip?的意思即是背景裁剪。
我曾經(jīng)在?從條紋邊框的實現(xiàn)談盒子模型?一文中談到了這個屬性,感興趣的可以回頭看看。
簡單而言,background-clip?的作用就是設(shè)置元素的背景(背景圖片或顏色)的填充規(guī)則。
與?box-sizing?的取值非常類似,通常而言,它有 3 個取值:
{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
使用了這個屬性的意思是,以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪,文字的背景即為區(qū)塊的背景,文字之外的區(qū)域都將被裁剪掉。
看個最簡單的 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
?
使用?-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; }
效果如下(請在 Chrome 內(nèi)核瀏覽器下觀看):
CodePen Demo
通過將文字設(shè)置為透明,原本 div 的背景就顯現(xiàn)出來了,而文字以為的區(qū)域全部被裁剪了,這就是?-webkit-background-clip:text?的作用。
?
各類效果制作
了解了最基本的用法,接下來可以想想如何去運(yùn)用這個元素制作一些效果。
?
實現(xiàn)文字漸變效果
利用這個屬性,我們可以十分便捷的實現(xiàn)文字的漸變色效果。
效果如下(請在 Chrome 內(nèi)核瀏覽器下觀看):
CodePen Demo
?
背景漸變動畫 && 文字裁剪
因為有用到?background?屬性,回憶一下,我在上一篇?巧妙地制作背景色漸變動畫!?利用了漸變?+?animation?巧妙的實現(xiàn)了一些背景的漸變動畫。可以很好的和本文的知識結(jié)合起來。
結(jié)合漸變動畫,當(dāng)然不一定需要過渡動畫,這里我使用的是逐幀動畫。配合?-webkit-background-clip:text,實現(xiàn)了一種,嗯,很紅燈區(qū)的感覺。
效果如下(請在 Chrome 內(nèi)核瀏覽器下觀看):?
CodePen Demo
?
圖片窺探效果
再演示其中一個用法,利用兩個 div 層一起使用,設(shè)置相同的背景圖片,父 div 層設(shè)置圖片模糊,其中子 div 設(shè)置?-webkit-background-clip:text,然后利用?animation?移動子 div ,去窺探圖片。
效果如下(請在 Chrome 內(nèi)核瀏覽器下觀看):
CodePen Demo
?
其實還有很多有趣的用法,只要敢想并動手實踐,會發(fā)現(xiàn) CSS 真的樂趣挺多的。
當(dāng)然很多人會吐槽這個屬性的兼容性,確實,我個人覺得前端現(xiàn)在的生態(tài)有一點面向未來編程的感覺(調(diào)戲)。不過提前掌握總體而言利大于弊,多多拓寬自己的視野。
到此本文結(jié)束,如果還有什么疑問或者建議,可以多多交流,原創(chuàng)文章,文筆有限,才疏學(xué)淺,文中若有不正之處,萬望告知。
總結(jié)
以上是生活随笔為你收集整理的谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: cygwin清屏
- 下一篇: PC端和移动APP端CSS样式初始化