在網頁中,圖片能為頁面增色不少,但是有時候我們需要在圖片上加上一些文字來說明圖片的內容或者表達我們的思想。這時候我們可以使用CSS來實現在圖片上方添加文字的效果。
<div class="img-text"> <img src="your-image-source"> <p class="text">your text here</p> </div> .img-text { position: relative; } .text { position: absolute; top: 0; left: 0; background-color: black; color: white; opacity: 0.8; padding: 10px; }
上面的代碼中,我們使用了
標簽來包裹圖片和文字,然后利用定位屬性設置了.p標簽的位置,讓其位于圖片上方。此外,還設置了一些背景色、透明度和內邊距等樣式,以讓文字更加美觀。
通過這種方法,我們可以輕松地在圖片上方添加文字,美化頁面的同時還能更好地表達自己的思想,讓網頁更具吸引力。
下一篇css在手機端查看代碼