如何使背景圖像從灰度淡入淡出顏色？

我目前有一個帶有彩色背景圖像的Bootstrap網頁。我希望圖像從灰度開始，然後在頁面加載（不懸停）時逐漸淡入顏色。如何使背景圖像從灰度淡入淡出顏色？

用CSS/HTML做這件事的最好方法是什麼？

2016-07-14 user6436986

第一篇文章？歡迎來到StackOverflow。看看[使用CSS將彩色圖像轉換爲黑白...]（http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS）然後告訴我們你的'已經嘗試過。提示：JSFiddle真的是顯示一小段代碼的最佳工具。容易有人幫助你... – zipzit

你不能這樣做在CSS中的背景圖像。 –

@Paulie_D什麼是背景，圖像，真的嗎？好的，所以我們有一個帶有圖像的div和一個低Z指數。這對你有用嗎？ – zipzit

您可以通過CSS關鍵幀動畫來實現這一點。

您可能希望在以下擴展：

@keyframes greyscale-fade-in { 
    0% { -webkit-filter: grayscale(100%); } 
    100% { -webkit-filter: grayscale(0%); } 
} 


.image-selector { 
    animation: greyscale-fade-in 1s ease-in forwards; 
}

關鍵幀控制如何讓圖像適合作爲頁面加載。

的animation價值需要被告知哪些關鍵幀使用（greyscale-fade-in），你要多久動畫將持續（1s爲1秒），你想（ease-in）什麼時間過渡。

forwards參數告訴動畫僅從0％到100％運行，而不是從100％回到0％。

動畫規則需要應用到以圖像爲目標的選擇器，因此請確保您的<img>或包裝<div>有一個您可以定位的類。

有關動畫的更多信息，您應該閱讀：https://developer.mozilla.org/en-US/docs/Web/CSS/animation

來源

2016-07-14 18:58:57

這是一個很好的解決方案！ - 試圖自己想出一個解決方案，然後測試你的出來，它效果很好。做一個小提琴，如果任何人都好奇https://jsfiddle.net/26zpq6vc/6/，但充分信任你的那個 – HisPowerLevelIsOver9000

非常感謝！ –

如何使背景圖像從灰度淡入淡出顏色？

回答

相關問題