移动端点击链接时出现灰色背景解决方案

最新推荐文章于 2021-11-06 19:23:30 发布
最新推荐文章于 2021-11-06 19:23:30 发布
阅读量692 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： java
原文链接：https://yq.aliyun.com/articles/572716
本文介绍了一种简单的方法来解决移动端点击链接时出现的灰色背景问题。通过使用CSS属性-webkit-tap-highlight-color设置为transparent，即可消除点击时的高亮效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在移动端，点击链接a的时候，会出现灰色背景。

有时候我们并不需要这样的背景，下面介绍一下如何去掉此背景。

代码如下:

1
-webkit-tap-highlight- color : transparent ;



原文发布时间为：2017-2-23

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：移动端点击链接时出现灰色背景解决方案

uni-app - 完美解决安卓苹果 App 端平台内嵌网站后，导致手机物理返回按键失效解决方案（内嵌的 webview 网页 H5 打包后手机物理返回键无效直接退出应用了），提供详细的解决示例代码！
🏆 前端领域优质创作者
07-19 1万+
uniapp，安卓Android软件，苹果ios软件，uniapp打包app后嵌套的网站无法返回上一页怎么办，解决uniapp使用webview引用H5网页手机物理返回无效，安卓app嵌套web-view物理返回不了，在app里嵌套网站后手机返回按键直接退出软件了，uniappwebview加载H5,手机返回键处理成返回上一页上一网页，解决uniapp使用webview引用H5网页手机物理返回无效，uniapp开发的app,如何控制web-view嵌入的网页的返回，无法返回上一页咋办，在uniapp
APP DIFF自动化解决方案
爱奇艺技术产品团队
08-27 722
8月7日下午，爱奇艺技术产品团队举办了第17期“i技术会”，本次技术会的主题是“智能化、精准化测试前沿探索”，本次沙龙与TesterHome社区联合举办。其中，来自爱奇艺的技术专家齐文方、...
移动端HTML5，ios(针对safari浏览器)点击事件闪现黑灰色背景解决方案
lishi9092的博客
12-28 2677
移动端HTML5，ios(针对safari浏览器)点击事件闪现黑灰色背景解决方案 最近做一个h5内嵌页，用了swiper,首屏并未使用点击事件，只是有图片背景和文字。但是ios开发那边发现 长按首屏，会闪现一个暗黑的半透明的遮罩，随后消失。发现分享出去的页面也有这个问题。 后来百度发现是 “ dom 有可选中的文字，使得DOM 可以被整个touch,在ios中被touch就会有高亮，也就是半透...
直接分享链接到微信？号之后的内容都变成灰色了
qq_24435837的博客
10-10 1420
我直接复制链接分享到QQ和微信，链接地址为http://www.bflv.com?id=151623 在QQ打开是正常的 在微信打开是懵逼的 查也无从下手，搜不到什么，最后对比了其他网站的网页发现了要这样写：http://www.bflv.com/?id=151623 终于都正常了
移动端网页点击d添加了点击事件的标签或者链接标签时，闪现一个灰色背景
OnTheRoad_ING的博客
11-06 267
移动端点击d添加了点击事件的标签或者链接标签时，闪现一个灰色背景 只有在ios设备上才会出现这种情况 解决办法 在有这个点击事件的元素上添加样式 -webkit-tap-highlight-color:rgba(0,0,0,0) 意思：轻触高光颜色 原因 移动端上，添加了点击事件的标签或着链接标签被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示
去除a标签的默认点击灰色背景
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
10-29 546
直接上代码： a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; outline: none; background: none; text-decoration: none; }
解决移动端iPhone设备点击时出现半透明的灰色背景
username_xu的博客
03-26 8334
、问题：在iPhone设备上点击时会出现一个半透明的灰色背景。解决办法：html,body{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }-webkit-tap-highlight-color 是 css3 的新属性，这个属性只用于 IOS(iPhone和iPad)。当你点击一个链接或通过 Javascript 定义的可点击元素的时候，它...
记一次移动端H5开发所遇到的问题与细节,以及ios兼容
想飞的猪的博客
09-14 4100
第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放 兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...
【移动端响应式设计】：优化移动端用户界面策略
[【移动端响应式设计】：优化移动端用户界面策略](https://image.woshipm.com/2023/08/14/a1176c60-3a7d-11ee-ada9-00163e0b5ff3.jpg) # 摘要 移动响应式设计是现代网页设计不可或缺的一部分，它涉及到一系列理论...
TeeChart图表在移动端的展示：适应不同屏幕的10大策略
文章首先介绍了移动端显示技术和响应式设计的基础知识，然后深入分析了TeeChart图表在移动环境下的基础配置和性能优化。在移动端适配策略章节，探讨了图表尺寸动态调整、触摸操作优化以及跨平台定制的必要性。实践...
搜索列表，点击搜索框，显示灰色的背景
08-21
UISearchBar+UISearchDisplayController，完整例子。
解决移动端页面点击图标或按钮产生透明灰色背景
lily2016n的博客
10-13 4308
html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
移动端网站或APP点击后出现闪动或灰色背景
weixin_30279315的博客
08-14 415
隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时，会出现的灰块 html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 　 移动端网站或APP点击后出现闪动或灰色背景 只需对...
解决h5页面点击元素出现灰色背景
zhaoshuang1010的专栏
01-17 7340
/*背景变灰*/ css文件加上这句即可： div {-webkit-tab-highlight-color: rgba(0,0,0,0); }
vue 弹窗变灰问题
fang156239305的博客
04-15 4543
当第一层弹窗为引用的子组件 ComponentEnterpriseIndex <div class="NewEvaluate"> <el-dialog :modal-append-to-body="false" style="text-align:center !important;font-size: 14px" width="75%" t...
移动端HTML5，ios点击事件闪现灰色背景解决方案
qq_32601115的博客
01-08 2036
隐藏文本框阴影 input, textarea{-webkit-appearance: @none;} 取消手机点击屏幕时，会出现的灰块 html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
CSS3去除移动端点击元素时产生的高亮背景色
Esther的博客
06-06 5026
做了一段时间的移动端项目了，碰到了一个顽固的BUG: 即点击一个icon元素的时候，发现底部会有一块蓝色的高亮。 最终，只用了一小段的css代码就解决了： -webkit-tap-highlight-color: transparent; 这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可...
移动端，点击之后某个区域后有阴影
热门推荐
White feathe 的博客
03-01 1万+
移动端，点击之后某个区域后有阴影 今天偶然发现一件很奇怪的事儿。 在移动端，在我去掉css的伪类及其伪元素跟相关的js之后， 在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得 鬼，后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。 如图所示，我所遇到的状况：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值