方法：1、用「color: transparent」設定文字透明；2、用「background-image:url("圖片位址")」為文字加上背景圖片；3、用「background-clip: text;」將圖片和文字融合，實現文字背景效果。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
今天我們來看看使用CSS怎麼為文字添加背景圖，讓文字變得生動好看！在我們想要創建一個較大的文字標題，但不想使用普通又枯燥的顏色來修飾時，非常有用！
我們先來看看效果圖：
下面我們來研究一下是怎麼實現這個效果的：
1、首先是HTML部分，定義兩個標題
<body> <h1>拼多多培训</h1> <h3>拼多多培训</h3> </body>
2、然後開始定義css樣式來修飾：
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
text-align: center;
min-height: 100vh;
font-size: 100px;
font-family:Arial, Helvetica, sans-serif;
}
3、最後就是為文字加上背景圖片：
將文字原本的顏色設定為transparent透明，然後利用background-image屬性為文字加上背景圖片
發現效果是這樣的，不如人意。這是因為缺少了一個關鍵屬性background-clip。 background-clip屬性是一個CSS3新屬性，要加入前綴來相容其他瀏覽器
h1 {
color: transparent;
background-image: url("001.jpg");
}
h3{
color: transparent;
background-image: url("002");
}
ok，大功告成！以下附上完整程式碼：
h1 {
color: transparent;
background-image: url("001.jpg");
background-clip: text;
-webkit-background-clip: text;
}
h3{
color: transparent;
background-image: url("002.jpg");
background-clip: text;
-webkit-background-clip: text;
}推薦學習：CSS影片教學
#以上是css怎麼給文字加背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！
