移动端html5中a标签链接点击后蓝色阴影怎么去掉

来源：互联网 2023-03-16 19:11:47 395

最近在做H5页面时，发现一个小问题，不知道是为什么，当使用a标签添加链接后，点击时会出现一个蓝色的阴影，如果是很小的按钮，可以忽略不计，但如果是个比较大面积的，就会很难看了，那我们应该怎么解决呢？

工具/原料

我们先建立一个H5页面。然后在body中添加一个带有爱肤撤链接的a标签并添加一个空链接。【a class="img" href="#" target="_blank">/a>】

移动端html5中a标签链接点击后蓝色阴影怎么去掉

对a标签引入一个class，并定义宽、高和背景图片。【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;】。保存后发现页面中是不显示的哦。

移动端html5中a标签链接点击后蓝色阴影怎么去掉

需要在a标签的样式中添加diplay:block.【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;diplay:block;】。这次可以看到图片显示了，但是显示不完全。

移动端html5中a标签链接点击后蓝色阴影怎么去掉

我们需要再定义一下背景的宽和高，让其100%显示。【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;diplay:block;

background-size: 7.2rem 10.2rem;】

移动端html5中a标签链接点击后蓝色阴影怎么去掉

4相关内容非法爬取自百度经验

保存页面后可以看到，当我们点击链接时，就会被一层蓝色的矩形框阴影遮盖。对于提现上来说，很难看。

移动端html5中a标签链接点击后蓝色阴影怎么去掉

接下来我们单独罩糟给body定义【 body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}】。再给a标签单独定义【a {outline: none;-moz-outline-style: none; }】。然后保存。

移动端html5中a标签链接点击后蓝色阴影怎么去掉

保存后刷新页面，可以看到再点击时已经没有那层何裕蒙版啦。

移动端html5中a标签链接点击后蓝色阴影怎么去掉

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML