CSS3解决移动页面上点击链接触发色块的问题
180 浏览量
2020-09-27
22:02:39
上传
评论
收藏 54KB PDF 举报
CSS3解决移动页面上点击链接触发色块的问题解决移动页面上点击链接触发色块的问题
移动浏览器中页面点击某个元素时会出现闪动的色块,也算是比较常见的问题了,这里我们就来讲通过-webkit-tap-
highlight-color:rgba(0,0,0,0)属性来用CSS3解决移动页面上点击链接触发色块的问题
引子引子
前段时间做微信页面的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种
情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，
百度的很多a标签都是一闪一闪的，有颜色块，但是淘宝和京东的手机端就没有这种情况，这是如何做到的呢？
研究研究
通过研究他们的代码发现，在根属性中，他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。
下面解释一下什么是RGBA，RAG就是颜色值了，大家都知道，A就是Alpha的缩写，就是透明度的意思，多了一个透明度。
那么这个
CSS Code复制内容到剪贴板
1. -webkit-tap-highlight-color:rgba(0,0,0,0)
的含义就是颜色是黑色，透明度是0，看不到了。所以点击就没有效果了。
-webkit-tap-highlight-color是啥东东？
概述：概述：
-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如
果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
语法：语法：
CSS Code复制内容到剪贴板
1. -webkit-tap-highlight-color：color
默认值：默认值： inherit
适用于：链接元素比如新窗口打开，img元素比如保存图像等等
兼容性：兼容性：
iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的，只是显示效果有所不同。
应用应用
CSS Code复制内容到剪贴板
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>haorooms博客之 tap-highlight-color测试</title>
6. <meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">
7. <meta name="apple-mobile-web-app-capable" content="yes" />
8. <style>
9. *{padding:0;margin:20px;color: #000;}
10. a{
11. text-decoration: none;
12. padding: 12px;
13. background-color:#39a6df;
14. border-radius: 10px;
15. display: block;
16. text-align: center;
17. }
18. a:link,a:visited,a:hover,a:active{
19. color:#fff;
评论0
最新资源