CSS 背景圖能否加超鏈接呢？ 這是許多網站設計師的疑問。實際上，CSS 背景圖是可以加超鏈接的。

.background{
background-image: url('image/link-bg.jpg');
width: 200px;
height: 200px;
}
.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<a href="#" class="background">
<div class="overlay"></div>
</a>

如上所示，我們可以在 CSS 背景圖周圍包裹一個帶有超鏈接的 DIV。使用絕對定位使其與背景圖重疊，并使其可見區域大小為背景圖。這樣，當用戶點擊背景圖時，實際上是點擊了超鏈接，從而跳轉到其他頁面。

另外，我們還可以使用 CSS 偽元素來添加超鏈接，而不需要包含額外的 HTML 元素：

.background{
background-image: url('image/link-bg.jpg');
width: 200px;
height: 200px;
position: relative;
}
.background::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.background:hover::before{
background-color: rgba(0,0,0,0.5);
}
.background a{
display:block;
width: 100%;
height: 100%;
}
<div class="background">
<a href="#"></a>
</div>

現在，我們將在 CSS 背景圖的偽元素中添加一個超鏈接，并使用全寬度和全高度的塊級元素作為其包裝器。我們還添加了一個:hover 選擇器，當用戶懸停在鏈接上時，將在偽元素周圍添加一個半透明黑色背景。這樣，我們就可以在保持 HTML 結構的簡潔的同時，實現 CSS 背景圖的超鏈接。