在網頁設計中，圖片的作用非常重要。為了讓網頁更加吸引人，我們可以給圖片添加特效。其中，金光閃閃的效果是一種非常美觀的特效，今天就來介紹一下如何用 CSS 實現這種效果。

/* 設置背景圖片 */
div{
background-image: url(圖片地址);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* 添加金光特效 */
div::before{
content: "";
display: block;
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
z-index: 1;
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.1) 100%);
animation: shining 2s infinite;
}
/* 定義動畫 */
@keyframes shining {
0% {
transform: scale(0.9);
opacity: 0.5;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.5;
}
}

上面的代碼中，我們首先通過 CSS 設置了頁面的背景圖片，并將其位置設為相對定位。然后，通過 ::before 偽元素添加了一個金光特效層，并將其位置設為絕對定位，覆蓋在原圖之上。

金光特效層使用了漸變背景，從透明到半透明到透明的效果，模擬出金光閃閃的效果。同時，我們還定義了一個名為 shining 的動畫，讓金光層不斷地縮放和改變透明度，增加了動態感。

通過組合以上 CSS 代碼，我們就可以創建出一個帶有金光閃閃效果的圖片。這種效果非常適合使用在扁平化風格的網頁設計中，能夠讓頁面更加生動有趣。