css怎么在圖片下面添加文字，CSS圖片下添加文字標(biāo)題，，圖片下文字添加方法，CSS實(shí)現(xiàn)圖片文字疊加，圖片文字添加技術(shù)，圖片下方文字添加，使用CSS添加圖片文字

前端小編 2024-12-03 16:14:23 5 0

在CSS中，可以使用position屬性將文字放置在圖片的下方，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="image-with-text">
  <img src="your-image-url" alt="Your Image">
  <p class="image-text">Your Text</p>
</div>

CSS代碼：

.image-with-text {
  position: relative;
  width: 300px; /* 你可以根據(jù)需要設(shè)置圖片的寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置圖片的高度 */
}
.image-with-text img {
  width: 100%;
  height: 100%;
}
.image-with-text p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(255,255,255,0.5); /* 可選，設(shè)置文字背景顏色 */
}

在這個(gè)示例中，position: relative;使得image-with-text元素可以包含其他元素，并且可以設(shè)置寬度和高度。position: absolute;則使得image-text元素可以相對(duì)于image-with-text元素進(jìn)行定位，并且可以設(shè)置底部和左側(cè)的位置。width: 100%;使得文字可以填充整個(gè)圖片的寬度，而padding: 10px;則給文字添加了一些內(nèi)邊距。background-color: rgba(255,255,255,0.5);設(shè)置了文字的背景顏色。