前端開發(fā)中，我們常常會使用 CSS 來在網(wǎng)頁上添加圖片。而有些圖片本身就帶有標(biāo)題，我們希望這些標(biāo)題能夠一起顯示出來，那么該如何實現(xiàn)呢？今天，我將介紹一種簡單的方法來實現(xiàn) CSS 圖片自帶標(biāo)題。 為了實現(xiàn)這個功能，我們需要給圖片應(yīng)用一些 CSS 樣式。同時，在 HTML 代碼中，我們需要添加一些標(biāo)記來告訴瀏覽器這個圖片的標(biāo)題。 首先，我們來看一下 CSS 樣式部分的代碼：

/* 設(shè)置圖片容器的寬度和高度 */
.img-container {
width: 300px;
height: 200px;
}
/* 設(shè)置圖片的樣式 */
.img-container img {
width: 100%;
height: 100%;
}
/* 設(shè)置圖片標(biāo)題的樣式 */
.img-title {
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
font-size: 20px;
padding: 10px 0;
position: relative;
bottom: 50px;
opacity: 0; /* 初始化時不顯示 */
transition: bottom 0.3s ease-in-out, opacity 0.3s 0.3s ease-in-out;
}
/* 鼠標(biāo)滑過圖片時顯示標(biāo)題 */
.img-container:hover .img-title {
bottom: 0;
opacity: 1;
}

這些樣式代碼其實很簡單，主要是為了控制圖片容器、圖片和圖片標(biāo)題的顯示效果。需要注意的是，在這個樣式中，我們使用了 CSS 過渡效果（transition）來實現(xiàn)圖片標(biāo)題的顯示/隱藏效果。 接下來，我們來看一下 HTML 代碼部分：

圖片標(biāo)題

從這個代碼中，可以看出我們在圖片容器內(nèi)添加了一個 p 標(biāo)簽，并定義了一個 class 為 img-title。這個 p 標(biāo)簽就是我們要添加的圖片標(biāo)題。 需要注意的是，由于我們想要讓這個標(biāo)題能和圖片一起顯示，所以我們需要把它放到圖片容器內(nèi)部。同時，我們還需要給整個圖片容器定義一個 class 為“img-container”，這樣才能保證上面的 CSS 樣式生效。 好了，上面的代碼中，我們已經(jīng)完成了關(guān)于 CSS 圖片自帶標(biāo)題的實現(xiàn)。這個功能非常實用，既可以提升頁面的美觀程度，又可以讓圖片的相關(guān)信息更加完整清晰。希望本篇文章能對大家有所幫助。