今天幫朋友看一效果,看到了手標(biāo)滑過(guò)圖片變?yōu)椴噬男Ч芎?jiǎn)單又兼容各大瀏覽器的,無(wú)非是準(zhǔn)備兩張圖,一張黑白,一張彩色,滑過(guò)切換背景圖或直接切換圖片方法,當(dāng)然,誰(shuí)也不想這么復(fù)雜操作。
下面用css3安排下:
給標(biāo)簽加上下方css代碼,即可變?yōu)楹诎?,也就是去?/p>
創(chuàng)新互聯(lián)建站于2013年開(kāi)始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元鷹手營(yíng)子做網(wǎng)站,已為上家服務(wù),為鷹手營(yíng)子各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
filter: grayscale(100%);
filter: gray;
安排下兼容寫(xiě)法
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
如果要做滑過(guò)變?yōu)椴噬?,舉個(gè)列子,網(wǎng)站頁(yè)面一排排圖片,均加了上方代碼,變?yōu)楹诎椎?,然后滑過(guò)讓恢復(fù)顏色,如下方代碼
初始代碼
img{
filter: grayscale(100%);
filter: gray;
}
滑過(guò)代碼
img :hover{
filter: grayscale(0);
filter: none;
}
整個(gè)網(wǎng)站頁(yè)面變?yōu)楹诎咨?,直接加給 html 即可安排
本文詳情 http://www.sharedblog.cn/?post=186