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

.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;
}

首先，我們要創建一個容器來包含圖片，并將其設為相對定位，以便在后續樣式中設置絕對定位元素。然后為包含圖片的 img 元素設置 block 屬性，以使其完全填充容器。

接下來，我們將創建一個偽元素 ::before 作為光影效果的背景。使用線性漸變來創建從不透明到透明的背景，這將創建一個從左上角到右下角的漸變色。opacity 屬性設置為 0，使其默認為不可見狀態。我們將在鼠標滑過容器時將其激活。

最后，我們將為容器添加鼠標懸停事件處理程序，這樣當鼠標滑過容器時，我們就可以設置偽元素的 opacity 屬性為 1，從而使其變得可見，呈現出光影效果。我們還為偽元素添加了過渡效果以使其動畫更加平滑。