欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3解決移動頁面上點擊鏈接觸發(fā)色塊的問題

haorooms   發(fā)布時間：2016-06-03 12:03:59   作者：Aaron   我要評論
移動瀏覽器中頁面點擊某個元素時會出現閃動的色塊,也算是比較常見的問題了,這里我們就來講通過-webkit-tap-highlight-color:rgba(0,0,0,0)屬性來用CSS3解決移動頁面上點擊鏈接觸發(fā)色塊的問題

引子

前段時間做微信頁面的時候，一行內容做了2個鏈接，點擊一個標簽的時候，整個顏色塊會閃一下，影響美觀。需求針對這種情況來問我，能否把這個一閃的顏色去掉。我當時就想，這個怎么去？那我也不好直接回絕她，好吧，我試試吧！經過研究，百度的很多a標簽都是一閃一閃的，有顏色塊，但是淘寶和京東的手機端就沒有這種情況，這是如何做到的呢？

研究

通過研究他們的代碼發(fā)現，在根屬性中，他們設置了這樣的一個屬性-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 是一個 不規(guī)范的屬性（unsupported WebKit property），它沒有出現在 CSS 規(guī)范草案中。

當用戶點擊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;       
  20.     text-decoration: none;   
  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>   
  31. </head>   
  33. <body>   
  34.     <p>默認<br><a href="javascript:void(0)">a標簽</a></p>   
  35.     <p>無色塊<br><a href="javascript:void(0)" class="no">a標簽</a></p>       
  36.     <p>點擊之后有紅色塊<br><a href="javascript:void(0)" class="hasRed">a標簽</a></p>   
  37.   
  38. </body>   
  39. </html>  

相關文章

  • CSS3顏色值RGBA與漸變色使用介紹

    CSS3之前漸變色圖片只能用背景圖片，CSS3的漸變色語法可以讓我們省去下載圖片的開銷，并且在改變?yōu)g覽器分辨率時有更好的效果，這里就為大家介紹一下,需要的朋友可以參考下
    2020-03-06

  • CSS3中使用RGBa來調節(jié)透明度的教程

    這篇文章主要介紹了CSS3中使用RGBa來調節(jié)透明度的教程,RGBA是RGB色彩模型的一個擴展,這個縮寫詞代表紅綠藍三原色的首字母,Alpha值代表顏色的透明度或者說不透明度,需要的朋
    2016-05-09

  • CSS3中使用RGBA設置透明度的示例

    這篇文章主要介紹了CSS3中使用RGBA設置透明度的示例,即在傳統的RGB值上增添調節(jié)透明度的Alpha值,需要的朋友可以參考下
    2015-08-04

  • CSS3 透明色 RGBA使用介紹

    我們今天需要討論的RGBA。如果需要更詳細的解說，大家就跟著我一起往下看吧
    2013-08-06

  • CSS3 rgb and rgba（透明色）的使用詳解

    這篇文章主要介紹了CSS3 rgb and rgba（透明色）的使用詳解，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-25

最新評論