先看一下最終實現的效果
圖中的hello是文本而不是圖片
那么如何實現這種效果呢？
HTML部分：
創建一個h1標簽 ，標簽內容為（hello）。通過link標簽鏈接外部樣式表style.css。
style.css部分：
1、主體body部分的統一樣式設置：
消除主體部分margin和padding的默認值；設置字體為黑體；背景為#000（黑色）。
2、設置h1的樣式：
- 設置文本字號為200px；
- 定義文本中僅有大寫字母（uppercase）；粗細為900；字母間距1px；
- position & transform: translate(-50%, -50%) 實現塊元素百分比下居中；
- 背景圖片路徑為1.jpg；圖片水平比例50%，垂直比例50%;
- 保持圖片的縱橫比，並將圖像縮放成完全覆蓋背景區域的最小大小。
- 指定文字的填充顏色，transparent透明；（使用-webkit-前綴）
- 指定背景繪制在text區域內，剪切成文字形狀；（使用-webkit-前綴）
實現代碼
HTML部分：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Awesome Text Effect</title>
6 <link rel="stylesheet" href="style.css">
7 </head>
8 <body>
9 <h1>hello</h1>
10 </body>
11 </html>
CSS部分：
1 body{ 2 margin:0px; 3 padding:0px; 4 font-family:"黑體"; 5 background:#000; 6 } 7 h1{ 8 font-size: 200px; 9 text-transform:uppercase; 10 /*定義文本中的大小寫，uppercase僅有大寫字母 */ 11 font-weight: 900; 12 /*定義文本的粗細，從100~900*/ 13 letter-spacing:1px; 14 /*設置字母間距*/ 15 position:absolute; 16 top:50%; 17 left:50%; 18 transform: translate(-50%, -50%); 19 /*position & transform: translate(-50%, -50%) 20 實現塊元素百分比下居中*/ 21 margin:0; 22 background:url(1.jpg) 50% 50%; 23 /*背景圖片路徑和size大小*/ 24 background-size: cover; 25 /*此時會保持圖像的縱橫比*/ 26 /*並將圖像縮放成將完全覆蓋背景定位區域的最小大小。*/ 27 -webkit-text-fill-color:transparent; 28 /*text-fill-color是設置指定文字的填充顏色，transparent透明*/ 29 -webkit-background-clip: text; 30 /*背景繪制在text區域內，剪切成文字形狀*/ 31 }