CSS圖片特效6 光影效果是一種很酷的效果。本文將介紹如何通過(guò)CSS添加光影效果，讓你的圖片更加生動(dòng)有趣。

.box {
position: relative;
display: inline-block;
}
.box img {
display: block;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.box:hover::before {
opacity: 1;
}

首先，我們要?jiǎng)?chuàng)建一個(gè)容器來(lái)包含圖片，并將其設(shè)為相對(duì)定位，以便在后續(xù)樣式中設(shè)置絕對(duì)定位元素。然后為包含圖片的 img 元素設(shè)置 block 屬性，以使其完全填充容器。

接下來(lái)，我們將創(chuàng)建一個(gè)偽元素 ::before 作為光影效果的背景。使用線性漸變來(lái)創(chuàng)建從不透明到透明的背景，這將創(chuàng)建一個(gè)從左上角到右下角的漸變色。opacity 屬性設(shè)置為 0，使其默認(rèn)為不可見(jiàn)狀態(tài)。我們將在鼠標(biāo)滑過(guò)容器時(shí)將其激活。

最后，我們將為容器添加鼠標(biāo)懸停事件處理程序，這樣當(dāng)鼠標(biāo)滑過(guò)容器時(shí)，我們就可以設(shè)置偽元素的 opacity 屬性為 1，從而使其變得可見(jiàn)，呈現(xiàn)出光影效果。我們還為偽元素添加了過(guò)渡效果以使其動(dòng)畫(huà)更加平滑。