酷炫字型背景圖的實現——神奇的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;接下來看看這個屬性是如何實現字型背景圖的...
開始之前，先來看一個酷炫的效果，看懂這個就基本不用往下看了...畢竟也不難，注意幾個地方就行了...傳送連結：ofollow,noindex">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: 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 （推薦必看）