CSS3处理挪动网页页面上点一下连接开启色块的难

日期:2021-01-20 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

引子

前段時间做手机微信网页页面的情况下,1行內容做了2个连接,点一下1个标识的情况下,全部色调块会闪1下,危害美观大方。要求对于这类状况来问我,能否把这个1闪的色调去掉。我那时候就想,这个如何去?那我也不太好立即拒绝她,好吧,我试试吧!历经科学研究,百度搜索的许多a标识全是1闪1闪的,有色调块,可是淘宝和京东的手机上端就沒有这类状况,这是怎样保证的呢?

科学研究

根据科学研究她们的编码发现,在根特性中,她们设定了这样的1个特性-webkit-tap-highlight-color:rgba(0,0,0,0)。

下面解释1下甚么是RGBA,RAG便是色调值了,大伙儿都了解,A便是Alpha的缩写,便是全透明度的意思,多了1个全透明度。那末这个

CSS Code拷贝內容到剪贴板
  1. -webkit-tap-highlight-color:rgba(0,0,0,0)  

的含意便是色调是黑色,全透明度是0,看不见了。因此点一下就沒有实际效果了。

-webkit-tap-highlight-color是啥东东?

简述:

-webkit-tap-highlight-color 是1个 不标准的特性(unsupported WebKit property),它沒有出現在 CSS 标准草案中。

当客户点一下iOS的Safari访问器中的连接或JavaScript的可点一下的元素时,遮盖显示信息的高亮度色调。该特性能够只设定全透明度。假如未设定全透明度,iOS Safari应用默认设置的全透明度。当全透明度设为0,则会禁用此特性;当全透明度设为1,元素在点一下时不能见。

英语的语法:

CSS Code拷贝內容到剪贴板
  1. -webkit-tap-highlight-colorcolor  

默认设置值: 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⑻" />   
  5. <title>haoroomsblog之 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-decorationnone;   
  12.     padding12px;   
  13.     background-color:#39a6df;   
  14.     border-radius: 10px;   
  15.     displayblock;   
  16.     text-aligncenter;   
  17. }   
  18. a:link,a:visited,a:hover,a:active{   
  19.     color:#fff;       
  20.     text-decorationnone;   
  21. }   
  22. .no{   
  23.     -webkit-tap-highlight-color:rgba(0,0,0,0);   
  24. }   
  25. .hasRed{   
  26.     -webkit-tap-highlight-color:rgba(255,0,0,1);   
  27. }   
  28.   
  29. </style>   
  30. </head>   
  31. <body>   
  32.     <p>默认设置<br><a href="javascript:void(0)">a标识</a></p>   
  33.     <p>无色块<br><a href="javascript:void(0)" class="no">a标识</a></p>       
  34.     <p>点一下以后有鲜红色块<br><a href="javascript:void(0)" class="hasRed">a标识</a></p>   
  35.   
  36. </body>   
  37. </html>