最近在更新官網(wǎng)項目，有這樣一種效果，圖片的背景顏色為灰色，當鼠標移入div內(nèi)時，會變化背景圖片，結(jié)合我們上一篇文章講的，在同一模板中使用不同的css，會給使用者更流暢的體驗，同時降低維護成本。
可是我們發(fā)現(xiàn)，我們使用transition為background設置漸變時，并沒有生效，變化還是瞬間完成了，這是因為background-color和background-image并不是一個屬性，所以css沒辦法把他們的變化聯(lián)系起來，所以我們只能使用background-image來漸變，因此，圖片的背景顏色不能是background-color，而應該是一個灰色圖片。
這里給大家一個網(wǎng)站，這個網(wǎng)站可以根據(jù)選擇的顏色和寬高生成指定的純色圖片，并且他生成的圖片占用的空間只有2k左右，在當今100兆的網(wǎng)速下都能瞬間獲取，不會因為網(wǎng)速慢而影響用戶的體驗。
https://uutool.cn/pure-color-img/
最后，給大家看一下效果。我們這里為了演示方便，大大加長了漸變時間。
可以看到，是非常明顯得到漸變。
下一篇： 迅睿cms中前端技巧
