-webkit-tap-highlight-color:rgba(0,0,0,0) 属性

原创 于 2024-02-29 20:53:17 发布 · 447 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

本文介绍了在移动端开发中，如何使用-webkit-tap-highlight-color属性来控制苹果浏览器Safari中链接和可点击元素的点击高亮颜色，该属性对于优化用户体验至关重要。

-webkit-tap-highlight-color:rgba(0,0,0,0)
//webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。

在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色

浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color
09-24
CSS中的-webkit-tap-highlight-color属性，简单来说功能就是手机端点击时的背景色设置，下面这篇文章主要介绍了CSS3中这个鲜为人知的属性：-webkit-tap-highlight-color的相关资料,需要的朋友可以参考借鉴，下面来一起看看吧。
-webkit-tap-highlight-color处理元素点击默认高亮
weixin_34168880的博客
03-24 300
2019独角兽企业重金招聘Python工程师标准>>> ...
-webkit-tap-highlight-color
qq_35250187的博客
06-07 932
这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。改写iOS   Safari中可点击元素的高亮颜色。该属性可以只设置透明的。如果未设置透明度，iOS  Safari使用默认的透明的。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。 语法：-webkit-tap-highlight-color:color |  transpa
浅谈 -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: rgba(0,0,0,0);
06-10
如果需要显示高亮色，可以将属性值设置为其他颜色值，如`-webkit-tap-highlight-color: #ff0000;`，表示点击元素时高亮为红色。 需要注意的是，该属性只适用于移动设备，对于桌面浏览器无效。同时，该属性只在...
-webkit-tap-highlight-color: transparent;该属性无法在安卓手机上生效如何解决
最新发布
09-16
-webkit-tap-highlight-color: rgba(0,0,0,0); } ``` 另外，也可以尝试添加`user-select: none;`，但这主要是禁用文本选择，与点击高亮无关。 如果上述CSS属性无效，我们可以尝试使用JavaScript来阻止触摸事件的...
【CSS】-webkit-tap-highlight-color
'Ablaze 的专栏
07-16 3369
-webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。         （移动端）有事件监听的元素被点击的时候会被高亮显示，表现为一个蓝框加上半透明的背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置
说说 -webkit-tap-highlight-color 属性
bellah521
05-04 4292
最近做了个项目，上边有一个筛选框（如下图），发现有一个bug，就是，在iphone手机上点击按钮的时候，屏幕总会闪动一下。这个现象在安卓机上没有发现。这让页面看起来很不友好也不流畅。网上看了下，发现加个属性就可以解决了； 筛选框效果图： 添加的属性如下：-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highli
CSS3 属性-webkit-tap-highlight-color的
前端的路上
05-13 2976
（一）-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 1833
这个属性可以指设置透明度。如果未设置透明度，iOS上的Safari会给予颜色一个默认的透明度。把透明度设为0，则会禁用此属性。如果你把透明度设为1，元素将会不可见。只用于iOS(iPhone和iPad)，是点击反馈时的区域背景，或者是点击时的高亮背景颜色。 语法 -webkit-tap-highlight-color: color 取值 color 颜色。
CSS的未来：一些试验性CSS属性
weixin_30247781的博客
08-23 965
但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS ...
多平台开发要用的-webkit-tap-highlight-color
weixin_39818813的博客
05-04 1335
这个属性只用于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
少油少盐不要辣
04-09 762
1.-webkit-tap-highlight-color 移动端点击链接元素时，会出现半透明灰色背景，设置-webkit-tap-highlight-color:transparent，即可去除。 2.手淘的重置css样式 有这么一段： * { margin: 0; padding: 0; box-sizing: border-box; outline: 0; ...
CSS3 修改和去除移动端点击事件出现的背景框 (tap-highlight-color)
weixin_30296405的博客
10-08 502
-webkit-tap-highlight-color 这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。 例如在Adnroid版本的微信中，点击a标签时将会出现一个橙色的小框表示点击的响应。 此时，如果对元素设置了tap-highlight-color值，例如: -webkit-tap-highlight-color: rgba(24...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值