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