移动端网页点击链接出现蓝色背景修复
技术学院󰃄 2019-06-14     󰃩 33 次查看

今天呢我们讨论下移动端在点击URL链接时出现背景色改怎么办?

 问题描述

首先呢我用的是android的手机做的测试,安装的是UC浏览器,在网页制作OK之后进行真机测试时发现点击网页中的超链接时会出现一个蓝色的背景,部分手机是灰色的,还有一些手机是有一个2PX左右的带色边框,机型我就不多说了,今天我们只要给大家枚举一个css属性来解决这个问题。

当然大多说用户是遇不到的,因为如果不是自己开发的话,这些问题可能已经被原作者给优化了,当然也有一部分朋友用的模板不是太严谨可能存在这个问题,那么我们今天介绍的这个熟悉就可以大显身手了。

 解决办法

这里呢我先把我们今天的主角请出来

-webkit-tap-highlight-color

啥?这是个什么东东,不要急我这里就给大家介绍一下。

这个是webkit内核浏览器的一个css属性,如果你是一个资深的站长应该对浏览器的内核多少有些了解,当然这个不重要,重要的是我们可以用这个属性解决问题,这个才是关键。

rgba(0,0,0,0)

这又是一个啥东东呢?

这个应该比-webkit-tap-highlight-color要好认一些,因为这就是一个透明的颜色代码。下面我们就要把这两个属性做下结合然后应用到我们的网页中,来处理我们遇到的问题了。

 使用方法

  1. *{

  2. -webkit-tap-highlight-color:rgba(0,0,0,0);

  3. }

把这个代码放到我们的css样式表第一行即可,我在这里给大家脑补一下,省得大家不明白,在css的世界*号代表着全局,就是像我上面的写法就是网页中的每个元素都会应用这个属性,所以我们通过这个简单的代码即可去掉网页中所有链接点击时出现背景颜色块的问题了。




转载出处:本文章(教程)为本站原创,未经许可、禁止转载!




首页
技术
资源
我的