CSS是一種用于網(wǎng)頁樣式設(shè)計的語言,可以實現(xiàn)各種效果,例如在多張圖片下方添加文字。這里我們可以使用以下代碼:
.pic { position: relative; display: inline-block; } .pic img { width: 100%; height: auto; } .pic .text { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 10px; box-sizing: border-box; font-size: 16px; line-height: 1.5; }
這段代碼中,我們首先給圖片容器添加了相對定位,并設(shè)置為內(nèi)聯(lián)塊級元素,以便可以讓多張圖片在同一行內(nèi)顯示。然后給圖片設(shè)置了寬度為100%,并自動根據(jù)高度等比例縮放。接下來就是添加文字的部分,我們給文字容器設(shè)置了絕對定位,并將其放在圖片底部。同時,讓它的寬度與圖片相同,即寬度為100%。我們使用了背景色為黑色、不透明度為0.8的半透明背景,并設(shè)置文字為白色。此外,還添加了一些padding和盒模型屬性來修飾文字的樣式。
在HTML代碼中,我們只需要在每個圖片容器中添加文字容器即可:
<div class="pic"> <img src="pic1.jpg" alt=""> <div class="text">這是圖片1的描述</div> </div> <div class="pic"> <img src="pic2.jpg" alt=""> <div class="text">這是圖片2的描述</div> </div>
其中,pic類是我們在CSS中定義的樣式。
最后,我們可以得到如下效果:
這是圖片1的描述
這是圖片2的描述