CSS中有一個很有趣的效果，就是利用圖片實現變暗效果。這個效果可以用來給按鈕、文字等元素增加一些交互性，讓網頁看起來更具有動感。

.darken {
background-image: url("example.jpg"); /* 背景圖片 */
background-size: cover; /* 自適應尺寸 */
background-position: center center; /* 居中顯示 */
transition: all 0.3s ease-in-out; /* 過渡效果 */
}
.darken:hover {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
}

使用上述代碼，我們可以實現當鼠標移動到元素上時，背景圖片會變暗的效果。其中，background-image用來引入背景圖片，background-size和background-position分別用來設置圖片尺寸和位置，transition則用來添加過渡效果。

在鼠標懸停的時候，我們使用:hover偽類來使得背景顏色變暗。具體來說，我們使用background-color屬性來設置半透明黑色。這里，我們使用rgba()函數來定義顏色，其中前三個參數為RGB顏色值，第四個參數為透明度。

總的來說，利用CSS實現圖片變暗效果是一種簡單而有趣的技巧。通過這種方式，我們不僅可以實現背景圖片顏色變化的效果，還能夠在按鈕、圖標等元素上吸引用戶的注意力。