本篇文章我們將向您介紹如何使用 HTML和CSS在圖像上新增文字，內容很詳細。
話不多說，我們直接進入正題~
1、用HTML和CSS表達的好處
不是「圖像本身寫入文字”，而是“透過HTML和CSS在圖像上配置文字”這一點有以下的好處。 （推薦教學：CSS影片教學）
即使放大，字元也不會模糊
它也在搜尋引擎中閱讀（適用於SEO）
你可以選擇字母
響應式設計允許您調整字體大小（您可以執行類似智慧型手機顯示器中的小寫字母...）
2、如何在在圖像上放置文字
第一步：我們需要準備一個圖像
作為一個例子，我想在深色背景的背景上放置白色文字。
第二步：將圖像和字母放在一個div元素中
將圖像和字母放在一個div標籤中。在範例中，將文字「萬裡長城」放在p標記中。當然您可以使用標題標籤而不是p標籤，也可以使用span標籤。
<div class = "example" > <img src="image/greatwall.jpg" alt="如何使用HTML和CSS在影像上新增文字？ （程式碼範例）" > <p>万里长城</p> </div>
第三個步驟：指定position屬性
為每個元素設定css的position屬性。
對作為父元素的div指定為position:relative，以及對包含該字串的p標籤設定為absolute。 img標籤不動。
把p標籤的位置設定為top:0; left:0。
為了把影像放在橫向上，請指定為img標籤的寬度為width : 100%。
.example{/*父元素div*/
position: relative;/*相対定位*/
}
.example p {
position: absolute;/*絶対定位*/
color: white;/*文字设为白色*/
top: 0;
left: 0;
}
.example img {
width: 100%;
}效果如下：
文字出現在圖片的左上角。 position:absolute父元素將決定相對於父元素的位置。 top:0; left:0表示「圖像將放置在父級（div）的左上角」。
第四步：調整文字樣式
我們現在來調整一下字體的樣式，試著放大字體和加粗。另外，為了展現好看的效果也來改變一下字體的種類。
.example{
position: relative;
}
.example p{
position: absolute;
color: white;
top: 0;
left: 0;
font-family :楷体,sans-serif;
font-weight: bold;
font-size: 2em;
}
.example img{width: 100%;}效果如下：
這就完成了，說明一下：如果想把圖像的尺寸固定為某一個像素的時候，請按照width : 100%的情況，對父元素的div指定width為某一個固定像素。
3、把文字放在圖像中間
在某些情況下，我想把“文字放在圖像的中心”，這時，CSS代碼應如下圖所示。
.example{
position: relative;
}
.example p{
position: absolute;
color: white;
/* top: 0;
left: 0;*/
font-family :楷体,sans-serif;
font-weight: bold;
font-size: 2em;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
}
.example img{width: 100%;}效果如下：
我們對上述居中來說明一下
top和left為50%
這是基本上放在中間的。但是，這樣的話就偏離了文字的大小。
調整文字部分的錯誤
在那裡使用transform: translate修正了文字的差異。在translate(-50%,-50%)中，垂直和橫向的文字的差異被修正。 ttransform是CS3的屬性，但除了IE8之外還對應其他瀏覽器。
為了與舊瀏覽器對應，也寫有供應商前綴（- ms 和- wabkit-）編寫翻譯。
如果加入了magin和padding還有空白的話，則可能會偏離中心。因此，為了謹慎起見，以我們把它值變為0。
4 、在圖像中顯示帶有背景顏色的類別名稱
下面介紹一下在圖像上顯示帶有背景顏色的文字的方法。
請看以下CSS程式碼，HTML與上面相同
.example {
position: relative;
}
.example p {
position: absolute;
top: 0;
left: 0;
margin: 0;
color: white;
background: lightblue;
font-size: 15px;
line-height: 1;
padding: 5px 10px;
}
.example img {
width: 100%;
}效果如下：
當標籤附著在圖片的角落時，字元被固定。在這種情況下，無論影像的亮度如何，您都可以清楚地看到。同樣，如果要更改圖像的大小，width我們建議為父元素的div來指定它。
以上是如何使用HTML和CSS在影像上新增文字？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
