移動端網頁點選連結出現藍色背景如何解決
阿新 • • 發佈:2019-02-18
最近在做移動端開發時,採用路由來實現網頁之間的跳轉,發現通過給文字和圖片加<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);