css怎麼在圖片上加文字

方法：1、將圖片元素和文字元素放到同一個div容器中；2、利用「圖片元素{position:relative}」語句為圖片元素新增相對定位樣式；2、利用「文字元素{position:absolute}」語句為文字元素加入絕對定位樣式即可。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css怎麼在圖片上加上文字

#可以使用position屬性來設定文字的位置，從而實現在圖片上新增文字。以下舉例講解html css怎麼在圖片上加入文字。

範例如下：

1、新建一個html文件，命名為test.html，用於講解html css怎麼在圖片上新增文字。使用div標籤建立一個模組，在div內，使用img標籤建立一張圖片。在div標籤內，使用p標籤建立一段文字，以下將透過css讓該段文字加入圖片。在css標籤中，透過「*」來初始化頁面所有元素內外邊距為0，避免影響下面css樣式定義。

2、在css標籤中，對div元素進行樣式設置，定義其位置屬性position為相對定位（relative）。

在css標籤中，對div內的p元素進行樣式設置，定義其位置屬性position為絕對定位（absolute），這個絕對定位是相對於圖片的位置而定的，讓文字距離圖片左邊緣10px，距離圖片上緣10px，並且設定文字顏色為紅色。

在瀏覽器中開啟test.html文件，查看實現的效果。

總結：

#1、建立一個test.html檔。

2、在檔案內，使用div標籤建立一個模組，在div標籤內，使用img標籤建立一個圖片，使用p標籤建立一段文字。

3、使用css設定div標籤的位置屬性為相對定位（position:relative;），設定p標籤為絕對定位（position:absolute;），再透過left和top屬性來設定p標籤在圖片上的位置。

注意事項：

圖片和文字的html標籤必須包含在一個容器(div)內。

（學習影片分享：css影片教學）

以上是css怎麼在圖片上加文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！