菜鳥教程提供了非常詳細的CSS教程，其中包括了如何使用CSS設(shè)置圖片鏈接，下面通過代碼實例來介紹一下。
<!DOCTYPE html>
<html>
<head>
<title>CSS圖片鏈接</title>
<style>
a {
text-decoration: none; /* 去掉鏈接下劃線 */
display: inline-block; /* 將鏈接轉(zhuǎn)換為塊級元素，便于設(shè)置寬高 */
width: 200px;
height: 200px;
border: 1px solid #000;
padding: 10px;
text-align: center;
}
img {
max-width: 100%; /* 防止圖片超出容器 */
}
</style>
</head>
<body>
<a >
<img src="https://www.runoob.com/images/logo.png" alt="logo">
<p>百度</p>
</a>
</body>
</html>在上面的代碼中，我們設(shè)置了一個帶有圖片的鏈接，經(jīng)過CSS的修飾后，鏈接的外觀變得更加美觀。具體來說，我們分別對鏈接和圖片分別設(shè)置了一些屬性：
- 鏈接：去掉下劃線、設(shè)置寬高、添加邊框和內(nèi)邊距、居中文本。
- 圖片：防止超出容器。
這樣，我們就能夠通過CSS來設(shè)置圖片鏈接的外觀了。
上一篇藏飾 css