CSS點擊出現圖片是網頁設計中常用的交互效果之一。它可為網頁增添不少時髦又實用的特性。以下是一種實現方法：
<div class="imgBox"> <img src="默認圖片路徑"> </div> <a href="#" class="showImg">點擊查看大圖</a>
這里用了一個標簽將圖片包裹在了一個
標簽中。接著用一個標簽作為觸發器，控制圖片的隱藏和顯示。
/* CSS 代碼 */
.imgBox img{
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.showImg{
display: inline-block;
background-color: #f1f1f1;
padding: 10px;
margin-top: 10px;
}
.showImg:hover{
background-color: #ddd;
}
.showImg:focus + .imgBox img{
display: block;
}CSS樣式用了:focus偽類，它表示當元素獲得焦點時，這個樣式才會生效。這里控制了觸發器要是獲得了焦點之后，緊接著的元素
里的圖片就變成可見的了。
到這里你應該明白了如何應用CSS點擊出現圖片啦。以上的方法可以通過簡單的修改來適應各種個樣的項目需求。等待你去探索！
下一篇css 灰色值