欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css多張圖片下面寫字

阮建安1年前6瀏覽0評論

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的描述