CSS實(shí)現(xiàn)圖片點(diǎn)擊放大是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)技巧，可以讓網(wǎng)頁(yè)更加美觀和交互性。下面簡(jiǎn)單介紹一下如何用CSS實(shí)現(xiàn)圖片點(diǎn)擊放大效果。
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
cursor: pointer;
}
img:focus {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 9999;
box-shadow: 0 0 50px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150">
</body>
</html>在上面的代碼中，我們首先用樣式元素(img)設(shè)置圖片的最大寬度為100%，高度自適應(yīng)，并且設(shè)置鼠標(biāo)指針為手型。然后我們使用:focus偽類(lèi)來(lái)實(shí)現(xiàn)圖片放大效果。當(dāng)用戶點(diǎn)擊圖片時(shí)，圖片會(huì)立即自適應(yīng)屏幕大小，然后通過(guò)固定定位(position:fixed)、居中對(duì)齊(margin:auto)、增加層級(jí)(z-index:9999)和添加半透明陰影(box-shadow)等樣式來(lái)達(dá)到放大效果。
需要注意的是，用戶必須點(diǎn)擊圖片才能觸發(fā)放大效果，并且圖片會(huì)在當(dāng)前頁(yè)面上放大，而非在新的窗口中。此外，如果要實(shí)現(xiàn)多張圖片的點(diǎn)擊放大效果，只需要將相應(yīng)的CSS樣式應(yīng)用到每一張圖片即可。