CSS圖片后字體居中顯示 在網頁設計中，我們通常會用到圖片和文字的組合，這時候就需要考慮如何讓文字居中顯示在圖片的后面。下面介紹一種用CSS實現圖片后字體居中顯示的方法。 首先，我們需要在HTML頁面中添加一張圖片，并在圖片后面添加一個p標簽，如下所示：

<div class="container">
<img src="example.jpg">
<p>這是一段文字</p>
</div>

接下來，我們為p標簽添加CSS樣式，讓它居中顯示在圖片后面。

.container {
position: relative;
}
.container img {
display: block;
margin: 0 auto;
}
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
/* 調整字體的樣式，包括顏色、陰影等 */
}

上面的代碼中，我們給容器div設置了相對定位，使得圖片和p標簽的絕對定位具有了相對的位置基準。圖片通過設置display:block和margin:0 auto屬性讓其居中顯示，p標簽通過設置position:absolute和top/left屬性使其處于圖片的正中央。translate(-50%, -50%)可以將p標簽中心點與容器中心點對齊，實現居中效果。 最后，我們還可以通過添加text-shadow屬性，讓字體在圖片后增加一些陰影效果，提高對比度和可讀性。 仔細閱讀上面的代碼，再結合HTML中的示例代碼，相信你已經掌握了如何實現CSS圖片后字體居中顯示的技巧。快去試試看吧！