欧美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-colorcolor  

默認(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-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>默認(rèn)<br><a href="javascript:void(0)">a標(biāo)簽</a></p>   
  33.     <p>無色塊<br><a href="javascript:void(0)" class="no">a標(biāo)簽</a></p>       
  34.     <p>點(diǎn)擊之后有紅色塊<br><a href="javascript:void(0)" class="hasRed">a標(biāo)簽</a></p>   
  35.   
  36. </body>   
  37. </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)論