在 HTML 中添加一個(gè)愛心是非常簡(jiǎn)單的，只需要使用一個(gè)特殊字符<3 即可。但是想要將一張照片放在愛心里面，就需要用到一些 CSS 的技巧。 首先，我們需要在 HTML 中添加這個(gè)愛心代碼，可以將它包裹在一個(gè)

標(biāo)簽中：

<3

接下來(lái)，我們可以使用 CSS 中的 ::before 偽元素和 background 屬性將一張照片放在愛心里面。需要注意的是，偽元素的 content 屬性必須設(shè)置為空字符串，而不是省略不寫。

<3

在上面的代碼中，我們首先為愛心添加了一個(gè) class 名稱，然后在 CSS 中給這個(gè) class 設(shè)置了一些樣式。其中，我們將 position 屬性設(shè)置為 relative，這是為了在偽元素中可以使用絕對(duì)定位。接著，在愛心的 ::before 偽元素中添加了一張背景圖片，并將其使用 background-size 和 background-position 屬性設(shè)置為合適的大小和位置。最后，我們還將偽元素的 border-radius 屬性設(shè)置為 50%，這樣就可以讓背景圖片變成圓形。Z-index 屬性設(shè)置為 -1，讓偽元素在愛心之后渲染，避免遮蓋住愛心。 綜上所述，通過(guò)簡(jiǎn)單的 HTML 愛心代碼和 CSS 技巧，我們就可以輕松地將一張照片放進(jìn)這個(gè)愛心之中，為網(wǎng)頁(yè)添加更多的情感元素。