CSS 圖片分割局部鏈接 在網頁設計中，我們經常會遇到需要分割一張圖片，并把每個局部鏈接到不同的頁面的情況。如何實現這個功能呢？下面讓我們一起學習一下。 首先，在 HTML 文件中，我們需要在需要分割的圖片所在的位置寫入以下代碼：

<div class="image">
<img src="picture.jpg" alt="Picture">
<a class="part1" href="#"></a>
<a class="part2" href="#"></a>
<a class="part3" href="#"></a>
</div>

在這段代碼中，我們給圖片包裹了一個 div 容器，并在此容器內添加了三個鏈接。現在，我們需要使用 CSS 設置這些鏈接的樣式，并且把它們定位到圖片上對應的部分。 如下是相關的 CSS 代碼：

.image {
position: relative;
}
.image a {
position: absolute;
display: block;
}
.part1 {
top: 20px;
left: 20px;
width: 100px;
height: 100px;
}
.part2 {
top: 20px;
left: 130px;
width: 100px;
height: 100px;
}
.part3 {
top: 130px;
left: 20px;
width: 100px;
height: 100px;
}
.part1:hover, .part2:hover, .part3:hover {
opacity: 0.5;
}

在這段代碼中，我們設置了圖片容器的 position 屬性為 relative，和三個鏈接的 position 屬性為 absolute。然后通過 top 和 left 進行了定位，設置了鏈接的寬高。注意，這些寬高需要根據圖片的實際大小來設置。最后，通過設置:hover來改變鏈接的透明度，當鼠標懸停在某個鏈接上時，它就會半透明顯示。 最終的效果圖如下所示：  通過以上的代碼，我們可以將圖片按照需求進行細分，并將其分別鏈接到不同的頁面中，實現更好的交互效果。