在網頁設計中，常常需要用到按扭跳轉圖片的效果。這種效果可以增加頁面的交互性和美觀性。在CSS中，我們可以通過一些簡單的代碼來實現這個效果。

/* HTML代碼 */
<button id="btn">跳轉圖片</button>
<img id="img1" src="image1.jpg">
/* CSS代碼 */
#btn {
background-color: #008CBA; /* 背景顏色 */
border: none; /* 去除邊框 */
color: white; /* 字體顏色 */
padding: 15px 32px; /* 內邊距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去除下劃線 */
display: inline-block; /* 顯示為行內塊 */
font-size: 16px; /* 字體大小 */
margin: 4px 2px; /* 外邊距 */
cursor: pointer; /* 鼠標指針 */
}
#btn:hover {
background-color: #555; /* 鼠標懸浮時背景顏色 */
}
#img1 {
display: none; /* 隱藏圖片 */
}
#btn:active + #img1 {
display: block; /* 點擊按鈕后顯示圖片 */
}

通過以上CSS代碼，我們可以實現當用戶點擊按鈕后，圖片會跳轉顯示在頁面上的效果。其中，我們用了CSS中的“+”選擇器來選取直接后代元素的方式來控制圖片的顯隱狀態。

總的來說，CSS按扭跳轉圖片效果的實現并不難，只需要一些基礎的CSS知識和一些想象力就能搞定。掌握這個效果也能讓我們的網頁設計更加豐富多彩。