話不多說(shuō)，我們直接進(jìn)入正題~

1、用HTML和CSS表達(dá)的好處

不是“圖像本身寫入文字”，而是“通過(guò)HTML和CSS在圖像上配置文字”這一點(diǎn)有以下的好處。（推薦教程：CSS視頻教程）

即使放大，字符也不會(huì)模糊

它也在搜索引擎中閱讀（適用于SEO）

你可以選擇字母

響應(yīng)式設(shè)計(jì)允許您調(diào)整字體大小（您可以執(zhí)行類似智能手機(jī)顯示屏中的小寫字母...）

2、如何在圖像上放置文字

第一步：我們需要準(zhǔn)備一個(gè)圖像

作為一個(gè)例子，我想在深色背景的背景上放置白色文字。

第二步：將圖像和字母放在一個(gè)div元素中

將圖像和字母放在一個(gè)div標(biāo)簽中。在示例中，將文字“萬(wàn)里長(zhǎng)城”放在p標(biāo)記中。當(dāng)然您可以使用標(biāo)題標(biāo)簽而不是p標(biāo)簽，也可以使用span標(biāo)簽。

 div html' target='_blank'>class = example  img src= image/greatwall.jpg  p 萬(wàn)里長(zhǎng)城 /p  /div 

第三步：指定position屬性

為每個(gè)元素設(shè)置css的position屬性。

對(duì)作為父元素的div指定為position:relative，以及對(duì)包含該字符串的p標(biāo)簽設(shè)置為absolute。img標(biāo)簽不動(dòng)。

把p標(biāo)簽的位置設(shè)置為top:0; left:0。

為了把圖像放在橫向上，請(qǐng)指定為img標(biāo)簽的寬度為width : 100%。

.example{/*父元素div*/ position: relative;/*相対定位*/.example p { position: absolute;/*絶対定位*/ color: white;/*文字設(shè)為白色*/ top: 0;  left: 0;.example img {  width: 100%; }

效果如下：

文字出現(xiàn)在圖像的左上角。position:absolute父元素將確定相對(duì)于父元素的位置。top:0; left:0表示“圖像將放置在父級(jí)（div）的左上角”。

第四步：調(diào)整文字樣式

我們現(xiàn)在來(lái)調(diào)整一下字體的樣式，嘗試放大字體和加粗。另外，為了展現(xiàn)出好看的效果也來(lái)改變一下字體的種類。

.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%;}

效果如下：

這就完成了，說(shuō)明一下：如果想把圖像的尺寸固定為某一個(gè)像素的時(shí)候，請(qǐng)按照width : 100%的情況，對(duì)父元素的div指定width為某一個(gè)固定像素。

3、把文字放在圖像中間

在某些情況下，我想把“文字放在圖像的中心”，這時(shí)，CSS代碼應(yīng)如下所示。

.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%;}

效果如下：

我們對(duì)上述居中來(lái)說(shuō)明一下

top和left為50%

這是基本上放在中間的。但是，這樣的話就偏離了文字的大小。

調(diào)整文字部分的錯(cuò)誤

在那里使用transform: translate修正了文字的差異。在translate(-50%,-50%)中，垂直和橫向的文字的差異被修正。ttransform是CS3的屬性，但除了IE8之外還對(duì)應(yīng)著其他瀏覽器。

為了與舊瀏覽器對(duì)應(yīng)，還寫有供應(yīng)商前綴（- ms 和- wabkit-）編寫翻譯。

如果加入了magin和padding還有空白的話，則可能會(huì)偏離中心。因此，為了慎重起見，以我們把它值變?yōu)?。

4 、在圖像中顯示帶有背景顏色的類別名稱

下面介紹一下在圖像上顯示帶有背景顏色的文本的方法。

請(qǐng)看以下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%; }

效果如下：

當(dāng)標(biāo)簽附著在圖像的角上時(shí)，字符被固定。在這種情況下，無(wú)論圖像的亮度如何，您都可以清楚地看到。同樣，如果要更改圖像的大小，width我們建議為父元素的div來(lái)指定它。

以上就是如何使用HTML和CSS在圖像上添加文字？（代碼示例）的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。