文章摘要moonshot-v1-8k
这篇文章介绍了在移动端项目中，点击元素时产生的高亮背景色的问题，并提供了CSS3去除高亮背景色的解决方法。作者分享了自己碰到这个问题的经验，并提供了详细的CSS代码示例，可以帮助读者轻松解决类似的问题。最终，文章的目的是帮助读者更好地掌握CSS3中的tap-highlight-color属性，灵活运用它来调整移动端项目的样式。
CSS3去除移动端点击元素时产生的高亮背景色
做了一段时间的移动端项目了，碰到了一个顽固的BUG: 即点击一个icon元素的时候，发现底部会有一块蓝色的高亮。最终，只用了一小段的css代码就解决了
tap-highlight-color
（移动端上）有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景，这有时候会和我本来的样式格格不入，就要想办法去掉。
以下是对应的 CSS 代码：
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
也可以通过rgba设置颜色，例：
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
