CSS 圖在字下方是一種常用的網(wǎng)站設(shè)計效果。它可以讓文字和圖像更好地結(jié)合，更美觀地呈現(xiàn)在用戶面前。想要實現(xiàn)這種效果，我們需要利用 CSS 中的 position 屬性和 z-index 屬性。

.container {
position: relative;
}
.text {
position: relative;
z-index: 2;
}
.image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}

首先，我們需要將包含文字和圖像的元素設(shè)為相對定位的容器元素，如上述代碼中的 .container。

然后，將文字設(shè)為相對定位元素，并設(shè)置 z-index 為 2，使其在圖像之上。

接著，將圖像設(shè)為絕對定位元素，將其位置設(shè)為底部居中，并通過 translateX(-50%) 將其水平居中，最后將其 z-index 設(shè)為 1，使其在文字之下。

通過以上 CSS 代碼，我們就可以實現(xiàn)文字和圖片的理想排布效果。