在網頁中,我們經常需要在圖片上方或下方添加文字,來更好地描述圖片。CSS 提供了很多方法來實現這一目的,接下來我們將介紹其中三種方法。
第一種方法是使用position
、top
和left
屬性來絕對定位文字。例如:
img { position: relative; } .img-text { position: absolute; top: 50px; left: 50px; }
其中,img
被設置為相對定位,以便.img-text
絕對定位時,參考的坐標是圖片本身,而不是整個網頁。然后通過調整top
和left
的值,使文字出現在指定位置。
第二種方法是將圖片和文字都包裹在一個div
元素中,并使用display: flex
屬性來使它們成為一個水平對齊的行,再使用align-items: center
屬性來垂直對齊。例如:
.img-container { display: flex; align-items: center; } .img-container img { margin-right: 20px; }
這里使用了margin-right
屬性來給圖片和文字之間添加一些間距。
第三種方法是使用 CSS3 的::before
和::after
偽元素來添加文字。例如:
.img-container::before { content: "這里是文字"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background-color: white; padding: 0 10px; } .img-container img { position: relative; }
這里通過給::before
添加一些樣式,使它出現在圖片上方,并水平居中。需要注意的是,transform: translateX(-50%)
可以讓元素在水平方向上居中,而且不會被容器寬度限制。
以上就是幾種在圖片上添加文字的 CSS 方法,根據實際需求選擇相應的方法即可。