CSS3 -webkit-background-clip:text;

CSS3 -webkit-background-clip:text; 將背景套用在文字上的做法，首先透過外層設定背景圖片，內部文字顏色調整為透明 color: transparent; ，即可達成文字作為 mask 遮罩裁剪圖片，呈現出文字樣式。

（可直接選取文字）

程式碼：

Html

<div class="outsite-bg">
  <div class="mask-copy">
    <h2 class="inline">CSS3 -webkit-background-clip:text; </h2>
    <p>CSS3 -webkit-background-clip:text; 將背景套用在文字上的做法，首先透過外層設定背景圖片，內部文字顏色調整為透明 color: transparent; ，即可達成文字作為 mask 遮罩裁剪圖片，呈現出文字樣式。</p>
  </div>
</div>

css

.outsite-bg{
  background: black;
  padding: 1px;
}
.mask-copy{
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-image: url(https://i.pinimg.com/originals/aa/76/e7/aa76e7e25083895b6a360e43f3b9ec83.jpg);
  font-size: 33px;
  width: 100%;
  max-width:800px;
  margin: 50px auto;
  line-height: 50px;
}
.inline{
  color:white;
  display:inline;
  font: inherit; 
}
.mask-copy p{
  color: transparent;
  display:inline;
}