酷炫字體背景圖的實現——神奇的background-clip: text

時間 2019-12-09

標籤字體背景實現神奇 background clip text 欄目 HTML 简体版

原文原文鏈接

　　愉快的時光老是飛快，七天小長假已接近尾聲，抓住假期的尾巴，再學個新知識點——css的background-clip: text屬性...會不會有種陌生的感受，畢竟在咱們的印象裏，background-clip只有padding-box、border-box、content-box三個屬性，這個text是個什麼鬼？？？沒用過不要緊，今天就來看看它用什麼妙用...css

　　background-clip的定義：規定背景的繪製區域；簡而言之，background-clip就是規定background-color/background-image背景（色/圖）在盒模型裏的做用範圍...html

　　清楚了background-clip的定義，就能夠放心的使用了...不過還要說明一點——兼容性，background-clip:text屬性目前只有chrome瀏覽器支持較好，其餘內核的不支持...這個注意就好了，使用的時候這麼寫： -webkit-background-clip:text;接下來看看這個屬性是如何實現字體背景圖的...web

　　開始以前，先來看一個酷炫的效果，看懂這個就基本不用往下看了...畢竟也不難，注意幾個地方就好了...傳送連接：https://jsbin.com/tisodirawi/edit?html,outputchrome

　　使用了這個屬性的意思是：以區塊內的文字做爲裁剪區域向外裁剪，文字的背景即爲區塊的背景，文字以外的區域都將被裁剪掉...瀏覽器

使用背景圖片時：字體

<!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；用背景色填充字體顏色...便可url

　　參考連接：http://web.jobbole.com/91212/?tdsourcetag=s_pctim_aiomsg（推薦必看）spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。