1. 程式人生 > >移動端網頁點選連結出現藍色背景如何解決

移動端網頁點選連結出現藍色背景如何解決

最近在做移動端開發時,採用路由來實現網頁之間的跳轉,發現通過給文字和圖片加<a>...</a>之後,每次在移動端執行時,點選或者長按都會出現藍色背景,非常不好看,採用下面這個方法得到有效解決。

只需要在css檔案中加入以下這句程式碼,就可以搞定

*{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

說明:*號表示應用與所有的元素。

可能有的小夥伴對這個屬性表示很陌生,我們來對這個屬性做一下簡單的介紹~

-webkit-tap-highlight-color介紹:

當你點選一個連結或者通過Javascript定義的可點選元素的時候,它就會出現一個半透明的灰色背景。要重設這個表現,你可以設定-webkit-tap-highlight-color為任何顏色,想要禁用這個高亮,設定顏色的alpha值為0即可。


這也意味著你同樣可以通過這個屬性來改變連結背景的顯示顏色。

如果你要設定為透明的,就使用-webkit-tap-highlight-color:rgba(0,0,0,0)

如果你想設定高亮色為50%透明的紅色:-webkit-tap-highlight-color: rgba(255,0,0,0.5);