关于-webkit-tap-highlight-color的一些事儿

最新推荐文章于 2024-02-29 20:53:17 发布
最新推荐文章于 2024-02-29 20:53:17 发布
阅读量228 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 移动开发
原文链接：http://www.cnblogs.com/0808bing/p/3402143.html
本文介绍如何在iOS设备上禁用点击链接或可点击元素时出现的半透明灰色背景。通过设置-webkit-tap-highlight-color属性，可以调整或完全禁用此效果，提高用户体验。

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

这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮，设置颜色的alpha值为0即可。

示例

设置高亮色为50%透明的红色

1

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad).

 

android也适用

转载于:https://www.cnblogs.com/0808bing/p/3402143.html

diaocong4659
关注
[问题探讨]规避H5开发ios使用fixed造成的闪屏
tom_wong666
12-22 1445
问题： H5开发ios，给页面头部使用fixed出现闪屏现象； 分析： 使用fixed给头部定位，页面滚动时，ios中出现屏幕中被固定的头部页面在滚动过程中闪屏，在安卓中未发现此问题。可见fixed在iso中并不稳定。 解决： 头部用普通文档流替代fixed定位，滚动区域改为div内部滚动，如下图： ...
CSS的未来：一些试验性CSS属性
weixin_30247781的博客
08-23 944
但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS ...
-webkit-tap-highlight-color处理元素点击默认高亮
weixin_34168880的博客
03-24 282
2019独角兽企业重金招聘Python工程师标准>>> ...
浅谈 -webkit-tap-highlight-color 属性
热门推荐
季诗筱的博客
03-14 1万+
这两天在做一个运营活动，是公司4周年的活动，要做一个拼蛋糕送祝福的H5页面。做完之后，发现有一个bug，就是，我在手机上（iphone5s）点击按钮的时候，屏幕总会闪动一下，这让页面看起来很不友好也不流畅。网上搜了一下，加了一句css就解决了：-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highlight背景高亮
-webkit-tap-highlight-color
qq_35250187的博客
06-07 913
这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。改写iOS   Safari中可点击元素的高亮颜色。该属性可以只设置透明的。如果未设置透明度，iOS  Safari使用默认的透明的。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 语法：-webkit-tap-highlight-color:color |  transpa
浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
其中之一就是`-webkit-tap-highlight-color`属性。这个属性主要用于移动设备，特别是iOS的iPhone和iPad，它允许开发者自定义用户点击元素时产生的高亮效果。 `-webkit-tap-highlight-color`的作用是设置在触摸设备...
-webkit-tap-highlight-color:解释一下这行代码
07-12
`-webkit-tap-highlight-color` 属性可以用来修改这个高亮颜色。 该属性的值可以是一个颜色值或者 transparent（透明）。例如，`-webkit-tap-highlight-color: #ff0000;` 会将点击时的高亮颜色设置为红色。 需要...
windows虚拟网卡适配器tap-windows-9.21.1.exe
11-13
虚拟网络适配器TAP-Windows Adapter V9下载、windows虚拟网卡适配器下载
解决ios端点击按钮闪烁问题（小tips）
01-04
在ios端，safari浏览器上触发click事件有300ms的延迟相应，为touch添加的样式会和click冲突而出现闪烁问题 在safari中触摸事件的相应顺序如下： touchstart --> touchmove --> touchend --> click(300ms) 此时可试用以下样式取消click事件的默认样式来消除页面闪烁问题 *{ -webkit-tap-highlight-color:rgba(0,0,0,0); } （值得一提的是，300ms的延迟主要是用于判断用户是否为双击操作） 总结 以上所述是小编给大家介绍的解决ios端点击按钮闪烁问题（小tips），希望
【CSS】-webkit-tap-highlight-color
'Ablaze 的专栏
07-16 3317
-webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。         （移动端）有事件监听的元素被点击的时候会被高亮显示，表现为一个蓝框加上半透明的背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置
CSS3 属性-webkit-tap-highlight-color的
前端的路上
05-13 2957
（一）-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可。 示例：设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5)...
-webkit-tap-highlight-color 属性
大爱无疆的博客
11-27 1819
这个属性可以指设置透明度。如果未设置透明度，iOS上的Safari会给予颜色一个默认的透明度。把透明度设为0，则会禁用此属性。如果你把透明度设为1，元素将会不可见。只用于iOS(iPhone和iPad)，是点击反馈时的区域背景，或者是点击时的高亮背景颜色。 语法 -webkit-tap-highlight-color: color 取值 color 颜色。
多平台开发要用的-webkit-tap-highlight-color
weixin_39818813的博客
05-04 1318
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。示例：设置高亮色为50%透明的红色:-webkit-tap-highlight-color: rgba(255,0,0,0.5);浏览器支持: 只有iOS(i...
-webkit-tap-highlight-color:rgba(0,0,0,0) 属性
最新发布
uebest的博客
02-29 382
-webkit-tap-highlight-color:rgba(0,0,0,0) 属性
说说 -webkit-tap-highlight-color 属性
bellah521
05-04 4260
最近做了个项目，上边有一个筛选框（如下图），发现有一个bug，就是，在iphone手机上点击按钮的时候，屏幕总会闪动一下。这个现象在安卓机上没有发现。这让页面看起来很不友好也不流畅。网上看了下，发现加个属性就可以解决了； 筛选框效果图： 添加的属性如下：-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highli
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值