我們?cè)谑褂?CSS 設(shè)計(jì)網(wǎng)頁(yè)時(shí)，會(huì)經(jīng)常需要在圖片上方或下方加入其他元素。這篇文章主要介紹一下如何通過(guò) CSS 在圖片上添加另一張圖片。 首先，我們需要在 HTML 代碼中添加一個(gè) `` 標(biāo)簽，如下所示：

<img src="example.jpg" alt="example">

如果需要在這張圖片上添加另一張圖片，我們可以使用 CSS 的偽元素 `::after` 或 `::before`。這里我們以 `::after` 為例。首先，我們需要在 CSS 中添加一個(gè)樣式：

img::after {
content: ""; /* 偽元素必須有內(nèi)容 */
display: block; /* 如果想讓圖片在同一行，可以改為inline-block */
width: 50px; /* 新添加的圖片的寬度 */
height: 50px; /* 新添加的圖片的高度 */
background-image: url("example2.jpg"); /* 新添加的圖片的路徑 */
}

這個(gè)樣式中，我們使用 `content` 屬性給偽元素添加一個(gè)空內(nèi)容，使用 `display` 屬性將偽元素設(shè)置為 `block` 或 `inline-block`，使它們可以跟圖片在同一行，使用 `width` 和 `height` 屬性設(shè)置偽元素的寬高，并使用 `background-image` 屬性給偽元素添加要顯示的圖片。 當(dāng)然，我們也可以使用其他 CSS 屬性來(lái)美化這些添加的圖片，比如調(diào)整它們的位置和透明度等等。 總之，通過(guò)使用偽元素 `::after` 或 `::before`，我們可以在圖片上輕松添加其他元素，此時(shí)的圖片就不再是單調(diào)的了，而是更加多樣化、豐富化。