CSS圖片文字切換顯示 CSS中可以使用背景圖和文字的隱藏和顯示屬性來實現圖片文字切換的效果。本文將介紹具體實現方法。 一、HTML結構 首先需要設置一個容器元素，包含圖片和文字，如下所示：

<div class="container">
<img src="image.jpg" alt="圖片">
<p>這是一段文字</p>
</div>

二、CSS樣式 接下來需要為容器和內部元素設置樣式。 1、容器元素樣式

.container {
position: relative; /* 設置相對定位，后面用于絕對定位子元素  */
width: 500px; /* 設置容器寬度，可根據實際需求調整 */
height: 300px; /* 設置容器高度，可根據實際需求調整 */
}

2、圖片樣式 圖片使用絕對定位，并設置z-index來保證圖片顯示在最上層。

.container img {
position: absolute; /* 設置絕對定位 */
top: 0;
left: 0;
z-index: 2; /* 圖片所在層 */
width: 100%;
height: 100%;
}

3、文字樣式 文字使用相對定位，設置z-index來保證文字顯示在圖片下層。

.container p {
position: relative; /* 設置相對定位 */
z-index: 1; /* 文字所在層 */
color: #fff; /* 設置文字顏色，可根據實際需求調整 */
font-size: 24px; /* 設置文字大小，可根據實際需求調整 */
}

四、效果實現 以上樣式完成后，需要使用CSS選擇器:hover來實現鼠標滑過圖片時文字的顯示和隱藏。具體實現如下：

.container:hover p {
opacity: 0; /* 隱藏文字，使文字完全透明 */
}
.container:hover img {
opacity: 0.5; /* 圖片透明度降低，使文字透過圖片顯現出來 */
}

以上樣式表示鼠標滑過容器時，文字將完全透明，圖片透明度降低，從而使文字通過圖片透過來顯現出來。 五、總結 通過以上的CSS樣式實現方法，我們可以輕松地實現圖片文字切換顯示的效果。只需要對容器和內部元素進行必要的樣式設置和將容器和:hover選擇器相結合，便可實現華麗的效果。