要使用 CSS 在圖片上顯示文字，需要：建立一個包含圖片的元素，並在 HTML 中為其指派 ID 或類別。在 CSS 中使用 position 和 top、left 屬性來定位文字元素在圖片上。使用 content 屬性將文字新增到 CSS 元素。使用 font-family、font-size 和 color 等屬性設定文字樣式。根據需要微調文字位置和樣式，以獲得所需效果。
如何使用CSS 在圖片上顯示文字
要使用CSS 在圖片上顯示文字，可以使用下列步驟：
1. HTML 中建立元素
在HTML 中，建立一個包含圖片的div 或span 元素，並為其指派一個ID 或類別。
<code class="html"><div id="image-container"> <img src="image.jpg" alt="Image"> </div></code>
2. CSS 中定位元素
使用 CSS 將文字元素定位在圖片上。可以使用position 和top、left 屬性：
<code class="css">#image-container {
position: relative;
}
#text {
position: absolute;
top: 20px;
left: 10px;
}</code>position: relative 將容器元素設定為參照點。 position: absolute 將文字元素從正常文件流中移除並根據容器定位。 top 和 left 屬性決定文字元素在容器內的偏移位置。 3. 將文字內容新增至CSS
#使用content 屬性將文字新增至CSS 元素：
<code class="css">#text {
content: "This is my text";
}</code>4. 設定文字樣式
使用CSS 為文字設定樣式，例如字體、大小和顏色：
<code class="css">#text {
font-family: Arial, sans-serif;
font-size: 20px;
color: white;
}</code>#5. 微調
#根據需要微調文字位置和樣式，以獲得所需效果。也可以使用其他 CSS 屬性，例如 background-color 和 padding，來美化文字元素。
範例程式碼
<code class="html"><div id="image-container"> <img src="image.jpg" alt="Image"> </div></code>
<code class="css">#image-container {
position: relative;
}
#text {
position: absolute;
top: 20px;
left: 10px;
font-family: Arial, sans-serif;
font-size: 20px;
color: white;
}</code>以上是css怎麼讓文字顯示在圖片上的詳細內容。更多資訊請關注PHP中文網其他相關文章！
