css怎麼給文字加背景-css教學-PHP中文網

css怎麼給文字加背景

奋力向前

發布： 2023-01-07 11:47:40

原創

12721 人瀏覽過

方法：1、用「color: transparent」設定文字透明；2、用「background-image:url("圖片位址")」為文字加上背景圖片；3、用「background-clip: text;」將圖片和文字融合，實現文字背景效果。

css怎麼給文字加背景

本教學操作環境：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屬性為文字加上背景圖片

rrreee

發現效果是這樣的，不如人意。這是因為缺少了一個關鍵屬性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中文網其他相關文章！