引子
前段时间做微信页面的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。需求针对这种情况来问我,能否把这个一闪的颜色去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?
研究
通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。
下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个
CSS Code复制内容到剪贴板- -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复制内容到剪贴板- -webkit-tap-highlight-color:color
默认值: inherit
适用于:链接元素比如新窗口打开,img元素比如保存图像等等
兼容性:
iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。
应用
CSS Code复制内容到剪贴板- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>haorooms博客之 tap-highlight-color测试</title>
- <meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <style>
- *{padding:0;margin:20px;color: #000;}
- a{
- text-decoration: none;
- padding: 12px;
- background-color:#39a6df;
- border-radius: 10px;
- display: block;
- text-align: center;
- }
- a:link,a:visited,a:hover,a:active{
- color:#fff;
- text-decoration: none;
- }
- .no{
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- }
- .hasRed{
- -webkit-tap-highlight-color:rgba(255,0,0,1);
- }
- </style>
- </head>
- <body>
- <p>默认<br><a href="javascript:void(0)">a标签</a></p>
- <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p>
- <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p>
- </body>
- </html>
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]