在 HTML 中,我們常常需要將文字放置在圖片上或者將圖片嵌入文本中。那么,如何設(shè)置圖中的文字呢?
首先,我們需要在 HTML 中插入圖片。這可以通過``標(biāo)簽來完成。例如:
<img src="example.jpg" alt="這是示例圖片">
這將會(huì)在網(wǎng)頁上顯示`example.jpg`圖片,并在圖片無法加載時(shí)顯示提示文字“這是示例圖片”。
然后,我們需要將文字放置在圖片上。這可以通過 CSS 樣式來完成。例如:img {
position: relative;
}
img::after {
content: "這是圖片上的文字";
position: absolute;
top: 0;
left: 0;
font-size: 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
padding: 5px;
}
這將會(huì)在圖片上添加白色的文字,文字會(huì)在圖片的左上角顯示,并且添加一個(gè)半透明的黑色背景。其中,`position: relative;`表示圖片的定位方式為相對位置,`img::after`表示在圖片之后添加樣式,`content`屬性表示要添加的文字內(nèi)容,`position: absolute; top: 0; left: 0;`表示文字相對于圖片的位置,`font-size`表示文字大小,`color`表示文字顏色,`background-color`表示背景顏色,`padding`表示內(nèi)邊距。
另外,我們還可以將圖片嵌入文本中。這可以通過`