CSS可以用來(lái)控制網(wǎng)頁(yè)中的樣式和布局，其中之一就是可以用CSS來(lái)實(shí)現(xiàn)圖片和文本的切換效果。

首先需要準(zhǔn)備好兩張不同的圖片和對(duì)應(yīng)的描述文本：

<div class="image-container">
<img src="image1.jpg">
<p>這是第一張圖片的描述文本</p>
</div>
<div class="image-container">
<img src="image2.jpg">
<p>這是第二張圖片的描述文本</p>
</div>

然后定義CSS樣式，將圖片的opacity屬性設(shè)置為0，將文字的display屬性設(shè)置為none，這樣初始的時(shí)候圖片是不可見(jiàn)的，而文字則會(huì)隱藏起來(lái)：

.image-container img {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image-container p {
display: none;
transition: all 0.3s ease-in-out;
}

接下來(lái)，定義鼠標(biāo)懸浮在圖片上時(shí)的效果，在此時(shí)將圖片的opacity屬性設(shè)置為1，將文字的display屬性設(shè)置為block，使得圖片變得可見(jiàn)，文本也會(huì)顯示出來(lái)：

.image-container:hover img {
opacity: 1;
}
.image-container:hover p {
display: block;
}

這樣，當(dāng)用戶鼠標(biāo)懸浮在圖片上時(shí)，就可以看到對(duì)應(yīng)的文本了。利用CSS的這個(gè)簡(jiǎn)單的技巧，可以實(shí)現(xiàn)很多有趣的網(wǎng)頁(yè)效果。