引子
前段時間做微信頁面的時候,一行內容做了2個鏈接,點擊一個標簽的時候,整個顏色塊會閃一下,影響美觀。需求針對這種情況來問我,能否把這個一閃的顏色去掉。我當時就想,這個怎么去?那我也不好直接回絕她,好吧,我試試吧!經過研究,百度的很多a標簽都是一閃一閃的,有顏色塊,但是淘寶和京東的手機端就沒有這種情況,這是如何做到的呢?
研究
通過研究他們的代碼發現,在根屬性中,他們設置了這樣的一個屬性-webkit-tap-highlight-color:rgba(0,0,0,0)。
下面解釋一下什么是RGBA,RAG就是顏色值了,大家都知道,A就是Alpha的縮寫,就是透明度的意思,多了一個透明度。那么這個
的含義就是顏色是黑色,透明度是0,看不到了。所以點擊就沒有效果了。
-webkit-tap-highlight-color是啥東東?
概述:
-webkit-tap-highlight-color 是一個 不規范的屬性(unsupported WebKit property),它沒有出現在 CSS 規范草案中。
當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時,覆蓋顯示的高亮顏色。該屬性可以只設置透明度。如果未設置透明度,iOS Safari使用默認的透明度。當透明度設為0,則會禁用此屬性;當透明度設為1,元素在點擊時不可見。
語法:
默認值: inherit
適用于:鏈接元素比如新窗口打開,img元素比如保存圖像等等
兼容性:
iOS 1.1.1及更高版本的Safari瀏覽器可用。大部分android手機也是支持的,只是顯示效果有所不同。
應用
新聞熱點
疑難解答