CSS 是一種強大的樣式表語言,它能夠讓你在網頁中加入各種樣式,包括文字顏色、字體大小、邊框、背景等。同時,也可以通過 CSS 在圖片中添加字體來提高圖片的可視性和信息傳達。下面,我們將介紹如何在圖片中使用 CSS 增加文字。
img { position: relative; } img::after { content: "這是一段圖片上的文字"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 20px; font-family: Arial; }
如上代碼,我們使用了偽元素選擇器 ::after 來實現在圖片上添加文字。我們首先將圖片的 position 屬性設置為 relative,這樣 ::after 元素會相對于父元素(即圖片)定位。接下來,我們使用 content 屬性來指定要添加的文本內容。此時需要注意,content 屬性只能用于偽元素選擇器中,不能用于其他元素。通過設置 position: absolute,top: 50%, left: 50% 將文本定位到圖片中心。使用 transform 屬性將元素水平和垂直位置各向左上移動50%的寬度和高度,以保證文本可以居中顯示。最后,設置文字的樣式和字體,達到最終的效果。
需要注意的是,文本內容需要用引號包裹起來,而且圖片需要支持 z-index 屬性,才能讓圖片上的文字正常顯示。出于安全考慮,不應在用戶上傳的圖片上使用這種方式添加文本。