引子
前段時間做微信頁面的時候,一行內容做了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;
新聞熱點
疑難解答