1、原因:移動端事件響應時會有預設的背景框顔色,a标簽active時也有預設的背景框顔色。
2、解決方法:
(1) 移動端讓背景框不顯示
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);
(2) pc端重置a标簽active時的背景框顔色
a:active{
background-color: 需要設定的顔色;
}
3、附加小技巧:
通常我們選中文字時的背景色是藍色。我們可以用以下樣式去設定網頁的選中内容的樣式:
::selection {
background: #FFF;
color: #333;
}
::-moz-selection {
background: #FFF;
color: #333;
}
::-webkit-selection {
background: #FFF;
color: #333;
}
如果要去掉選中時的顔色,把background都置為none就行了。