css3 去掉点击高光(移动端)

在我们用手机浏览网页时,当点击某个链接或者点击事件时 会出现一层蓝色半透明的高光显示,

但在开发webapp时,由于网页是被native load去的,在app里面点击的时候如果出现高光则显得很不和谐

css3 的-webkit-tap-highlight-color: rgba(0,0,0,0);的这个属性完美的解决了这个问题

你只去把他放在body里就可以了,通过属性值你可以清晰的知道它所表达的意思 rgba都为0,意思是黑色全透明

这样你点击的时候就不会有蓝色的半透明层了

代码如下:

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

当然你也可以根据自己的需要 比如说你希望点击的时候有灰色半透明层

那么将透明度设置下

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

还可以设置不同的颜色

body{-webkit-tap-highlight-color: rgba(210,10,10,0.3);}

那么这时点击的时候就是一个红色半透明的层

上一篇:杜教筛


下一篇:webpack+react多页面开发(二)-终极架构