在CSS中,您可以使用多種方法將文字添加到圖片下方,以下是一種常見(jiàn)的方法:
您需要在HTML中創(chuàng)建一個(gè)包含圖片和文字的容器。
<div class="image-container"> <img src="path/to/your/image.jpg" alt="Your Image"> <p class="image-text">Your Text</p> </div>
在CSS中,您可以設(shè)置容器的樣式,以便將文字放置在圖片下方。
.image-container { position: relative; width: 300px; /* or any other width */ height: 200px; /* or any other height */ } .image-container img { width: 100%; height: 100%; } .image-container p { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 10px; background-color: rgba(255,255,255,0.7); /* or any other color */ }
在這個(gè)例子中,.image-container
容器使用position: relative;
來(lái)定位圖片和文字,圖片使用width: 100%; height: 100%;
來(lái)填充整個(gè)容器,文字使用position: absolute;
來(lái)定位在容器的底部,并使用bottom: 0; left: 0; right: 0;
來(lái)使其水平居中。margin: 0; padding: 10px;
設(shè)置了文字的邊距和填充,background-color: rgba(255,255,255,0.7);
設(shè)置了文字的背景顏色,您可以根據(jù)需要調(diào)整這些樣式。