我在我的頁面上有一個很好的背景，我想讓我的文本標題作為一個遮罩來穿過它包含的div，并將背景作為一個紋理。

我可以在CSS中做這個嗎？或者我必須打開Photoshop？

有限的瀏覽器支持，但背景剪輯可以讓你得到這種效果:http://tym pus . net/Tutorials/experiments backgroundcliptext/(點擊動畫按鈕獲得更多樂趣)

使用SVG，您可以這樣做:http://people . opera . com/dstorey/images/newyorkmaskexample . SVG(查看源代碼以了解實際完成的工作，也可參見參考文章)

使用背景圖片和CSS，你可以這樣做:http://www.netmagazine.com/tutorials/texturise-web-type-css

正如CSS-Tricks在本文中所展示的，“文本背后的圖像”可以這樣實現:

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

但是不能保證它能在所有的瀏覽器上工作，所以他們建議做一些變通，比如modernizr。

這是它工作時的樣子:

CSS3中有一個background-clip: text屬性，盡管它并不適用于所有瀏覽器。更多詳情請見此處。

來延伸@sgress454的回答。如今，背景剪輯(background-clip: text)在Firefox和Edge中都能工作，但其瀏覽器兼容性仍不完全。Safari不支持Chrome的部分功能(僅支持帶前綴的屬性版本。根據WebKit博客，文本裝飾或陰影不包括在剪輯中。).背景-剪輯:文本仍然是你正在尋找的:

背景-剪輯:文本；

背景在前景文本內繪制(剪裁到前景文本)。

MDN

演示:

body {background: black;}

div {
  background: url(https://images.unsplash.com/photo-1543005472-1b1d37fa4eae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60), black;
  background-clip: text;
  color: transparent;
}

<div>This background clips to the text.</div>