CSS實現圖片多選效果

CSS是網頁設計中一種非常重要的語言，可以通過它來控制網頁中的樣式。其中一個常見的應用就是實現圖片多選效果。利用CSS的選擇器以及一些特定的樣式來改變在網頁上的顯示效果。

img.multi-select {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.5;
transition: all 0.2s;
cursor: pointer;
}
img.multi-select.selected {
-webkit-filter: grayscale(0);
filter: grayscale(0);
opacity: 1;
}

上述代碼中，我們首先定義了一個CSS類名為“multi-select”，用來添加到所有需要實現多選效果的圖片上。當鼠標懸停在這些圖片上時，它們將變暗，以表明當前圖片處于可選狀態，具體效果如下：

當用戶點擊任意一張處于可選狀態的圖片時，我們就利用JavaScript將其添加上另外一個CSS類名“selected”，如下：

$('img.multi-select').on('click', function() {
$(this).toggleClass('selected');
});

最后，我們為添加了“selected”類名的圖片定義了一個新的樣式，這個樣式會讓它們重新恢復亮度，以表明當前處于已選狀態：