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

CSS3解決移動(dòng)頁面上點(diǎn)擊鏈接觸發(fā)色塊的問題

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

引子

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

研究

通過研究他們的代碼發(fā)現(xiàn)，在根屬性中，他們?cè)O(shè)置了這樣的一個(gè)屬性-webkit-tap-highlight-color:rgba(0,0,0,0)。

下面解釋一下什么是RGBA，RAG就是顏色值了，大家都知道，A就是Alpha的縮寫，就是透明度的意思，多了一個(gè)透明度。那么這個(gè)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. -webkit-tap-highlight-color:rgba(0,0,0,0)  

的含義就是顏色是黑色，透明度是0，看不到了。所以點(diǎn)擊就沒有效果了。

-webkit-tap-highlight-color是啥東東？

概述：

-webkit-tap-highlight-color 是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。

當(dāng)用戶點(diǎn)擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點(diǎn)擊的元素時(shí)，覆蓋顯示的高亮顏色。該屬性可以只設(shè)置透明度。如果未設(shè)置透明度，iOS Safari使用默認(rèn)的透明度。當(dāng)透明度設(shè)為0，則會(huì)禁用此屬性；當(dāng)透明度設(shè)為1，元素在點(diǎn)擊時(shí)不可見。

語法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. -webkit-tap-highlight-color：color  

默認(rèn)值： inherit

適用于：鏈接元素比如新窗口打開，img元素比如保存圖像等等

兼容性：

iOS 1.1.1及更高版本的Safari瀏覽器可用。大部分android手機(jī)也是支持的，只是顯示效果有所不同。

應(yīng)用

CSS Code復(fù)制內(nèi)容到剪貼板
  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測(cè)試</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>默認(rèn)<br><a href="javascript:void(0)">a標(biāo)簽</a></p>   
  35.     <p>無色塊<br><a href="javascript:void(0)" class="no">a標(biāo)簽</a></p>       
  36.     <p>點(diǎn)擊之后有紅色塊<br><a href="javascript:void(0)" class="hasRed">a標(biāo)簽</a></p>   
  37.   
  38. </body>   
  39. </html>  

相關(guān)文章

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

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

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

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

  • CSS3中使用RGBA設(shè)置透明度的示例

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

  • CSS3 透明色 RGBA使用介紹

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

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

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

最新評(píng)論