今天我們要學習的是如何在圖片上加上超鏈接，這是網頁設計中一個非常常見的需求。而要實現這一效果，我們需要用到 CSS。 在 HTML 代碼中，我們可以通過標簽來創建一個超鏈接。而在 CSS 中，我們可以使用 background-image 屬性來將圖片作為元素的背景，然后再將該元素的背景鏈接到我們需要的網址。 下面是一段實現在圖片上添加超鏈接的 CSS 代碼。我們使用 pre 標簽進行展示，以便更清晰地看到代碼的結構：

a {
display: inline-block;
background-image: url(圖片鏈接);
width: 圖片寬度;
height: 圖片高度;
}
a:hover {
/* 鼠標懸浮時的效果 */
opacity: 0.8;
}
a:active {
/* 點擊后的效果 */
outline: none;
}

使用這段代碼，我們可以在 HTML 中創建一個超鏈接，并將其鏈接到我們需要的 URL：

請點擊下方的圖片訪問我的個人主頁：

當用戶點擊圖片時，瀏覽器就會打開一個新的標簽頁，展示我們所需要的網址。同時，我們可以使用其他 CSS 屬性來給該元素添加一些額外的樣式，以達到更好的視覺效果。 希望這篇文章對你有所幫助，祝你在學習 CSS 的過程中愉快！