在圖片上添加文字CSS,可以通過以下步驟實現(xiàn):
1、導(dǎo)入CSS文件
在HTML文件中導(dǎo)入CSS文件,可以使用<link>
標(biāo)簽將CSS文件鏈接到HTML文件中。
<link rel="stylesheet" type="text/css" href="style.css">
2、定義圖片和文字的樣式
在CSS文件中定義圖片和文字的樣式,可以使用position
屬性將文字添加到圖片上。
img { position: relative; } .text { position: absolute; top: 0; left: 0; color: #000; font-size: 24px; }
img
選擇器用于選擇圖片元素,position: relative;
表示圖片元素相對于其正常位置進(jìn)行定位。.text
選擇器用于選擇需要添加的文字元素,position: absolute;
表示文字元素相對于***近的已定位祖先元素進(jìn)行定位,top: 0; left: 0;
表示文字元素的左上角與圖片元素的左上角對齊,color: #000; font-size: 24px;
表示文字元素的顏色和字體大小。
3、將文字添加到圖片上
在HTML文件中將文字添加到圖片上,可以使用<div>
元素將文字包裹起來,并添加相應(yīng)的CSS類。
<img src="image.jpg"> <div class="text">這是一段添加的文字</div>
src
屬性指定圖片的路徑,class
屬性添加相應(yīng)的CSS類。
通過以上步驟,就可以使用CSS在圖片上添加文字了。