CSS（Cascading Style Sheets）是一種用于描述文檔如何呈現(xiàn)的樣式表語言。在 web 開發(fā)中，CSS 能夠為網(wǎng)頁添加各種效果，如字體大小、顏色、布局、背景等。本文將介紹如何使用 CSS 讓圖片文字懸浮。

// HTML 代碼
<div class="container">
<img class="img" src="example.jpg" alt="example">
<h3 class="text">Example Text</h3>
</div>
// CSS 代碼
.container {
position: relative;
width: 300px;
height: 200px;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 1.5rem;
text-align: center;
opacity: 0;
transition: all 0.5s ease;
}
.container:hover .text {
opacity: 1;
}

在 HTML 代碼中，我們使用 div 元素作為容器，其中包含一個 img 元素和一個 h3 元素。在 CSS 代碼中，我們?yōu)槿萜髟O置了相對定位，使內(nèi)部元素的絕對定位相對于容器。為了使圖片填充整個容器，我們使用了 object-fit: cover; 屬性。我們?yōu)槲淖衷卦O置了絕對定位，并將其相對于容器居中對齊。我們?yōu)槲淖衷靥砑恿艘恍邮剑绫尘吧⒆煮w顏色和大小等。我們還將文字元素的 opacity 屬性設置為 0，使其最初不可見，當鼠標懸浮在容器上時，將 opacity 屬性設置為 1，文字元素就會顯示出來了。

通過以上 CSS 樣式的設置，我們就可以很輕松地實現(xiàn)圖片文字懸浮效果了。CSS 的強大之處在于能夠讓我們輕松地實現(xiàn)各種各樣的效果，只需要理解其基本原理和語法。