用CSS3解決移動(dòng)端手指點(diǎn)擊或滑動(dòng)屏幕時(shí)出現(xiàn)的淺藍(lán)色背景框

2022-06-01    分類: 網(wǎng)站建設(shè)

默認(rèn)情況下,移動(dòng)端手機(jī)網(wǎng)站當(dāng)手指點(diǎn)擊某元素時(shí),該元素會(huì)出現(xiàn)一個(gè)淺藍(lán)色的背景框,如果是鏈接,點(diǎn)擊完就加載到新的頁面去了,可能感覺不太明顯,但是如果做一些效果,比如手指滑動(dòng)屏幕的效果,就感覺比較明顯了

因?yàn)榛瑒?dòng)這個(gè)動(dòng)作細(xì)拆開來,就是手指先點(diǎn)擊屏幕某處,然后再進(jìn)行手指移動(dòng),你會(huì)發(fā)現(xiàn)被點(diǎn)擊到的元素后邊總有個(gè)淺藍(lán)色背景,雖然你手指離開后它自己會(huì)消失,也不影響大局,但是總會(huì)感覺還是不夠好,那么這個(gè)問題如何解決呢?

在CSS3中,有一個(gè)屬性“-webkit-tap-highlight-color”,我們不想要那個(gè)點(diǎn)擊產(chǎn)生的背景框的話,只需要在body樣式中設(shè)置該屬性rgba中的alpha值為0即可,具體寫法如下:

-webkit-tap-highlight-color: rgba(0,0,0,0)

這樣設(shè)置以后,移動(dòng)端手機(jī)網(wǎng)站手指點(diǎn)擊或滑動(dòng)屏幕時(shí)就不會(huì)再出現(xiàn)那個(gè)淺藍(lán)色背景框了,當(dāng)然,如果你想保留這個(gè)背景框,而只是改變下這個(gè)背景框的顏色,同樣是用該屬性,修改對(duì)應(yīng)rgba即可。

當(dāng)前名稱:用CSS3解決移動(dòng)端手指點(diǎn)擊或滑動(dòng)屏幕時(shí)出現(xiàn)的淺藍(lán)色背景框
文章來源:http://muchs.cn/news/162124.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、標(biāo)簽優(yōu)化、小程序開發(fā)、定制開發(fā)虛擬主機(jī)、品牌網(wǎng)站建設(shè)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)