用CSS3解决移动端手指点击或滑动屏幕时出现的浅蓝色背景框

2022-06-01 分类：网站建设

默认情况下，移动端手机网站当手指点击某元素时，该元素会出现一个浅蓝色的背景框，如果是链接，点击完就加载到新的页面去了，可能感觉不太明显，但是如果做一些效果，比如手指滑动屏幕的效果，就感觉比较明显了

因为滑动这个动作细拆开来，就是手指先点击屏幕某处，然后再进行手指移动，你会发现被点击到的元素后边总有个浅蓝色背景，虽然你手指离开后它自己会消失，也不影响大局，但是总会感觉还是不够好，那么这个问题如何解决呢？

在CSS3中，有一个属性“-webkit-tap-highlight-color”，我们不想要那个点击产生的背景框的话，只需要在body样式中设置该属性rgba中的alpha值为0即可，具体写法如下：

-webkit-tap-highlight-color: rgba(0,0,0,0)

这样设置以后，移动端手机网站手指点击或滑动屏幕时就不会再出现那个浅蓝色背景框了，当然，如果你想保留这个背景框，而只是改变下这个背景框的颜色，同样是用该属性，修改对应rgba即可。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容