酷炫字體背景圖的實現——神奇的background-clip: text
愉快的時光總是飛快，七天小長假已接近尾聲，抓住假期的尾巴，再學個新知識點——css的background-clip: text屬性...會不會有種陌生的感覺，畢竟在我們的印象裏，background-clip只有padding-box、border-box、content-box三個屬性，這個text是個什麽鬼？？？沒用過沒關系，今天就來看看它用什麽妙用...
background-clip的定義：規定背景的繪制區域；簡而言之，background-clip就是規定background-color/background-image背景（色/圖）在盒模型裏的作用範圍...
清楚了background-clip的定義，就可以放心的使用了...不過還要說明一點——兼容性，background-clip:text屬性目前只有chrome瀏覽器支持較好，其他內核的不支持...這個註意就行了，使用的時候這麽寫： -webkit-background-clip:text;接下來看看這個屬性是如何實現字體背景圖的...
開始之前，先來看一個酷炫的效果，看懂這個就基本不用往下看了...畢竟也不難，註意幾個地方就行了...傳送鏈接：https://jsbin.com/tisodirawi/edit?html,output
使用了這個屬性的意思是：以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉...
使用背景圖片時：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>background-clip</title> <style> div { margin: auto; width: 1000px; height: 300px; line-height: 300px; text-align: center; font-size: 120px; font-weight: bold; color: transparent; /* 重點1 */ background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493353832&di=c063b6b9c89082e96ffee0766112ffec&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0111%2F07%2F3.jpg%21960.jpg") no-repeat center center; background-size: cover; -webkit-background-clip: text; /* 重點2 */ } </style> </head> <body> <div>background-clip</div> </body> </html>
總結：背景屬性設置background-clip：text，同時字體顏色color:transparent；用背景色填充字體顏色...即可
參考鏈接：http://web.jobbole.com/91212/?tdsourcetag=s_pctim_aiomsg（推薦必看）
酷炫字體背景圖的實現——神奇的background-clip: text