此次的重點就在於兩個屬性,
background 屬性
mask 屬性
這兩個屬性分別是兩種實現方式的關鍵。css
效果圖 html
代碼前端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent; } </style> </head> <body> <span>前端簡單說</span> </body> </html>
代碼很少,咱們來看看, background: linear-gradient(to right, red, blue);
這行是給背景設置爲漸變色,這裏注意一點,這樣是簡寫了,實際上是給background-image
設置爲漸變色,不是 background-color
,是背景圖 取值爲漸變色,若是不知道漸變色,直接到這裏看,
CSS3 漸變(Gradients) css3
-webkit-background-clip: text;
這行就要說到,background-clip 屬性了 ,咱們來看看 W3Cschool 上的說明web
background-clip 屬性 規定背景的繪製區域
語法 background-clip: border-box|padding-box|content-box;
segmentfault
上面沒有說取值 text 的狀況,看到前面的前綴,你們應該也能想到,它的兼容性問題了,目前還不是能全部瀏覽器都支持。 瀏覽器
取值爲text的意思,就是以區塊內的文字做爲裁剪區域向外裁剪,文字的背景即爲區塊的背景,文字以外的區域都將被裁剪掉。 spa
因此,咱們最後寫color: transparent;
讓文字爲透明色,就是讓後面背景色顯示出來。ssr
效果圖 code
代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <style type="text/css"> h1{ position: relative; color: yellow; } h1:before{ content: attr(text); position: absolute; z-index: 10; color:pink; -webkit-mask:linear-gradient(to left, red, transparent ); } </style> </style> </head> <body> <h1 text="前端簡單說">前端簡單說</h1> </body> </html>
代碼也很少,咱們簡單說一下,
:before 選擇器向選定的元素 前 插入內容。
使用content 屬性來指定要插入的內容。
content取值 attr 就是用來獲取屬性值的,content:attr(屬性名);
content: attr(text);
能獲取到元素的 text 屬性,這裏的這個text屬性是本身自定義的一個屬性,你也能夠在元素中加一個 tt 屬性,像這樣 <h1 tt="前端簡單說">前端簡單說</h1>
而後content屬性 這樣寫,content: attr(tt);
一樣是能夠起做用的。
好的咱們繼續說第二種方式的重點,mask屬性,由於以前已經寫過一篇介紹mask屬性的文章了,
簡單說 CSS中的mask—好好利用mask-image
這裏就不很詳細的介紹了,想詳細瞭解的朋友能夠看看上面這篇文章,必定會對你有所幫助的。
mask屬性簡單說,就是能讓元素的某一部分顯示或隱藏。
咱們看張圖就能明白,第二種方式實現的原理了
此次說的這兩種方式,應該算是很容易理解了,但願對你們有點幫助。