CSS中可以使用position
屬性將標(biāo)簽顯示在圖片下方,以下是一個(gè)示例代碼:
HTML代碼:
<div class="image-container"> <img src="image.jpg" alt="圖片描述"> <div class="label">圖片標(biāo)簽</div> </div>
CSS代碼:
.image-container { position: relative; width: 300px; height: 200px; } .image-container img { width: 100%; height: 100%; } .image-container .label { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #000; border-radius: 5px; padding: 5px; text-align: center; }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)名為image-container
的容器,用于包含圖片和標(biāo)簽,我們將圖片設(shè)置為填充整個(gè)容器,并將標(biāo)簽設(shè)置為***定位在容器的底部,標(biāo)簽的寬度設(shè)置為100%,高度設(shè)置為30px,背景顏色為半透明的白色,邊框?yàn)?px的黑色實(shí)線,邊框圓角為5px,內(nèi)邊距為5px,文本居中對(duì)齊。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。