CSS勾選圖片是一個很實用的技巧，可用于在表單中的復選框、單選框以及開關(guān)等元素中，打造獨特的個性化風格。利用CSS屬性來勾選圖片，比起傳統(tǒng)的使用JavaScript方法勾選圖片，更加快速簡便，在網(wǎng)頁性能上也更有優(yōu)勢。下面，我們將介紹如何使用CSS勾選圖片。

/*勾選圖片定義*/
label.checkbox {
width: 30px;
height: 30px;
background: url(checkbox.png) no-repeat;
display: inline-block;
vertical-align: middle;
cursor: pointer;
margin-right: 10px;
}
/*復選框未選中狀態(tài)*/
label.checkbox:not(.checked) {
background-position: 0 0;
}
/*復選框選中狀態(tài)*/
label.checkbox.checked {
background-position: -30px 0;
}
/*單選框未選中狀態(tài)*/
label.radio:not(.checked) {
background-position: 0 -30px;
}
/*單選框選中狀態(tài)*/
label.radio.checked {
background-position: -30px -30px;
}

以上的代碼中使用了一些CSS屬性定義，例如“background”屬性定義了元素的背景圖片，背景圖片的默認重復方式是repeat，這里使用了“no-repeat”關(guān)鍵字去除了重復，使得圖片在元素內(nèi)只出現(xiàn)一次。在label.checkbox元素定義中還設置了“cursor”為“pointer”，用來改變鼠標指針的形狀，增加了元素的交互性。

根據(jù)復選框和單選框的不同特點，我們又分別設置了不同的CSS樣式。在未選中狀態(tài)時，元素的背景圖片顯示未勾選狀態(tài)；在選中狀態(tài)時，背景圖片變?yōu)橐压催x狀態(tài)。在CSS中，利用“:not()”偽類選擇器能夠選擇未擁有某個特定類的元素，這樣就能通過類的添加或移除來實現(xiàn)復選框選中或未選中狀態(tài)變化。

最后，我們可以在HTML代碼里使用這些定義，在需要的地方插入指定類型的“l(fā)abel”標簽，即可實現(xiàn)勾選圖片。具體實現(xiàn)可以參考下面的示例：

<label class="checkbox"></label>
<label class="checkbox checked"></label>
<label class="radio"></label>
<label class="radio checked"></label>

這些HTML代碼將會顯示四個不同類型的勾選圖片，分別為復選框未選中和選中狀態(tài)，以及單選框未選中和選中狀態(tài)。