點(diǎn)擊圖片加深CSS怎么寫(xiě)

在網(wǎng)頁(yè)設(shè)計(jì)中，點(diǎn)擊圖片加深CSS是一種常見(jiàn)的效果，用于突出顯示或聚焦圖片，這種效果可以通過(guò)CSS中的陰影、透明度或顏色變化來(lái)實(shí)現(xiàn)，下面是一些示例代碼，展示如何實(shí)現(xiàn)點(diǎn)擊圖片加深CSS效果。

1、使用CSS陰影：

img {
  transition: box-shadow 0.3s ease;
}
img:active {
  box-shadow: 0 0 10px 5px #000;
}

在這個(gè)示例中，圖片在點(diǎn)擊時(shí)會(huì)變得更深，因?yàn)樘砑恿艘粋€(gè)黑色的陰影。transition屬性用于平滑過(guò)渡效果。

2、使用CSS透明度：

img {
  opacity: 1;
  transition: opacity 0.3s ease;
}
img:active {
  opacity: 0.7;
}

在這個(gè)示例中，圖片在點(diǎn)擊時(shí)會(huì)變得半透明，因?yàn)橥该鞫葟?降低到0.7。transition屬性用于平滑過(guò)渡效果。

3、使用CSS顏色變化：

img {
  color: #000;
  transition: color 0.3s ease;
}
img:active {
  color: #333;
}

在這個(gè)示例中，圖片在點(diǎn)擊時(shí)會(huì)變得更深，因?yàn)轭伾珡暮谏優(yōu)樯罨疑?code>transition屬性用于平滑過(guò)渡效果。

這些示例代碼只是基本的實(shí)現(xiàn)方式，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化，確保你的網(wǎng)頁(yè)支持CSS過(guò)渡效果，并且圖片本身具有足夠的對(duì)比度，以便實(shí)現(xiàn)明顯的加深效果。