在CSS中,可以使用text-decoration
屬性為圖片下的文字添加下劃線,以下是一個(gè)示例:
<div style="position: relative;"> <img src="your-image-url" alt="Your Image"> <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: #000; z-index: -1;"></div> <p style="position: relative; z-index: 1; color: #fff; text-decoration: underline;">Your Text</p> </div>
在這個(gè)示例中,我們首先在div
元素中設(shè)置position
屬性為relative
,以便我們可以使用absolute
定位來(lái)放置圖片和文本,我們放置圖片并創(chuàng)建一個(gè)***定位的div
元素,其背景顏色與圖片相同,高度為20像素,位于圖片的底部,我們放置文本,并使用text-decoration
屬性添加下劃線。
這個(gè)示例假設(shè)圖片和文本都是塊級(jí)元素,并且文本位于圖片的下方,如果圖片和文本不是塊級(jí)元素,或者文本位于圖片的上方或旁邊,那么可能需要調(diào)整定位屬性來(lái)實(shí)現(xiàn)所需的效果。