在CSS3中，您可以使用相對(duì)定位（relative positioning）或***定位（absolute positioning）來(lái)實(shí)現(xiàn)文字在圖片下面的效果。

相對(duì)定位是一種簡(jiǎn)單的方法，您可以將圖片設(shè)置為相對(duì)定位，然后將文字設(shè)置為***定位，這樣文字就會(huì)出現(xiàn)在圖片的下方。

img {
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
  left: 0;
}

在這個(gè)例子中，圖片被設(shè)置為相對(duì)定位，而段落則被設(shè)置為***定位。bottom: 0屬性將段落放置在圖片的下方，而left: 0屬性則使其靠左對(duì)齊。

另一種方法是使用flexbox布局，您可以將圖片和文字都設(shè)置為flexbox容器中的項(xiàng)目，然后設(shè)置適當(dāng)?shù)膶傩詠?lái)實(shí)現(xiàn)文字在圖片下面的效果。

.container {
  display: flex;
  align-items: flex-end;
}
.image {
  max-width: 100%;
}
.text {
  margin-top: 10px;
}

在這個(gè)例子中，.container元素被設(shè)置為一個(gè)flexbox容器，align-items: flex-end屬性使其子元素（圖片和文字）在底部對(duì)齊。max-width: 100%屬性將圖片的寬度限制為100%，而margin-top: 10px屬性則給文字添加了一個(gè)上邊緣，這種方法可以實(shí)現(xiàn)更復(fù)雜的布局需求，并且更加靈活和可維護(hù)。