最近在做H5页面时,发现一个小问题,不知道是为什么,当使用a标签添加链接后,点击时会出现一个蓝色的阴影,如果是很小的按钮,可以忽略不计,但如果是个比较大面积的,就会很难看了,那我们应该怎么解决呢?
工具/原料
Visual Studio Code或DW
方法/步骤
2
对a标签引入一个class,并定义宽、高和背景图片。【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;】。保存后发现页面中是不显示的哦。
3
需要在a标签的样式中添加diplay:block.【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;diplay:block;】。这次可以看到图片显示了,但是显示不完全。
4
我们需要再定义一下背景的宽和高,让其100%显示。【.img {width: 7.2rem;height: 10.2rem;background: url(图片链接) no-repeat;diplay:block;background-size: 7.2rem 10.2rem;】
5
保存页面后可以看到,当我们点击链接时,就会被一层蓝色的矩形框阴影遮盖。对于提现上来说,很难看。
6
接下来我们单独给body定义【 body {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}】。再给a标签单独定义【a {outline: none;-moz-outline-style: none; }】。然后保存。
7
保存后刷新页面,可以看到再点击时已经没有那层蒙版啦。
注意事项
不添加a标签的outline:none也可以实现我们要的效果。
下一篇:a标签传值如何隐藏数据