最近在更新官網(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中前端技巧
開啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站手術(shù)移動(dòng)護(hù)理系統(tǒng)詳細(xì)流程(千佛山醫(yī)院版）")
開啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站手術(shù)移動(dòng)護(hù)理系統(tǒng)")
開啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站紅寶書智慧黨建平臺(tái)")
