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è)
- -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í)不可見。
語法:
- -webkit-tap-highlight-color:color
默認(rèn)值: inherit
適用于:鏈接元素比如新窗口打開,img元素比如保存圖像等等
兼容性:
iOS 1.1.1及更高版本的Safari瀏覽器可用。大部分android手機(jī)也是支持的,只是顯示效果有所不同。
應(yīng)用
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>haorooms博客之 tap-highlight-color測(cè)試</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;
- display: block;
- text-align: center;
- }
- a:link,a:visited,a:hover,a:active{
- color:#fff;
- text-decoration: none;
- }
- .no{
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- }
- .hasRed{
- -webkit-tap-highlight-color:rgba(255,0,0,1);
- }
- </style>
- </head>
- <body>
- <p>默認(rèn)<br><a href="javascript:void(0)">a標(biāo)簽</a></p>
- <p>無色塊<br><a href="javascript:void(0)" class="no">a標(biāo)簽</a></p>
- <p>點(diǎn)擊之后有紅色塊<br><a href="javascript:void(0)" class="hasRed">a標(biāo)簽</a></p>
- </body>
- </html>
相關(guān)文章
- 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è)置透明度的示例,即在傳統(tǒng)的RGB值上增添調(diào)節(jié)透明度的Alpha值,需要的朋友可以參考下2015-08-04
- 我們今天需要討論的RGBA。如果需要更詳細(xì)的解說,大家就跟著我一起往下看吧2013-08-06
- 這篇文章主要介紹了CSS3 rgb and rgba(透明色)的使用詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-25