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

于 2024-02-29 20:53:17 发布
阅读量369 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/uebest/article/details/136380766
本文介绍了在移动端开发中，如何使用-webkit-tap-highlight-color属性来控制苹果浏览器Safari中链接和可点击元素的点击高亮颜色，该属性对于优化用户体验至关重要。

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

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

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

-webkit-tap-highlight-color
weixin_34232363的博客
10-28 2050
webkit的css扩展：1、-webkit-tap-highlight-color:这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景 -webkit-tap-highlight-color:transparent；或者 -webkit...
CSS的未来：一些试验性CSS属性
weixin_30247781的博客
08-23 940
但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提供了一些独特的属性。在本文中，我们将看一下鲜为人知的CSS ...
浅析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 279
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: rgba(0,0,0,0);
06-10
如果需要显示高亮色，可以将属性值设置为其他颜色值，如`-webkit-tap-highlight-color: #ff0000;`，表示点击元素时高亮为红色。 需要注意的是，该属性只适用于移动设备，对于桌面浏览器无效。同时，该属性只在...
<canvas data-zr-dom-id="zr_0" width="1536" height="487" style="position: absolute; left: 0px; top: 0px; width: 1229px; height: 390px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>分析横轴会出现显示两段相同数字的原因
最新发布
07-20
对于横轴显示两段相同数字的原因，可能有以下几种情况： 1. 数据重复：在绘制图形前，可能存在数据源中有相同的数值，导致横轴显示重复的数字。请检查数据源是否存在重复数据。 2. 绘制方法问题：在绘制图形的代码...
<meta charset="UTF-8"><input type="text" autocomplete="off" placeholder="试试这样问我：FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" class="el-input__inner" style="margin: 0px; padding: 0px; box-sizing: border-box; font-size: 14px; appearance: none; background-image: none; border-radius: 4px; border: none; color: rgb(96, 98, 102); display: inline-block; height: 48px; line-height: 40px; outline: none; transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; width: 518px; flex: 1 1 0%; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; orphans: auto; widows: auto; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.3); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;">
06-06
如果你遇到了 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 错误，通常是因为 JavaScript 堆内存不足导致的。你可以尝试通过以下方式解决： 1. 增加内存限制：通过设置 ...
【CSS】-webkit-tap-highlight-color
'Ablaze 的专栏
07-16 3311
-webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。         （移动端）有事件监听的元素被点击的时候会被高亮显示，表现为一个蓝框加上半透明的背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置
说说 -webkit-tap-highlight-color 属性
bellah521
05-04 4258
最近做了个项目，上边有一个筛选框（如下图），发现有一个bug，就是，在iphone手机上点击按钮的时候，屏幕总会闪动一下。这个现象在安卓机上没有发现。这让页面看起来很不友好也不流畅。网上看了下，发现加个属性就可以解决了； 筛选框效果图： 添加的属性如下：-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎，tap点击，highli
CSS3 属性-webkit-tap-highlight-color的
前端的路上
05-13 2953
（一）-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 1817
这个属性可以指设置透明度。如果未设置透明度，iOS上的Safari会给予颜色一个默认的透明度。把透明度设为0，则会禁用此属性。如果你把透明度设为1，元素将会不可见。只用于iOS(iPhone和iPad)，是点击反馈时的区域背景，或者是点击时的高亮背景颜色。 语法 -webkit-tap-highlight-color: color 取值 color 颜色。
多平台开发要用的-webkit-tap-highlight-color
weixin_39818813的博客
05-04 1316
这个属性只用于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 728
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 490
-webkit-tap-highlight-color 这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。 例如在Adnroid版本的微信中，点击a标签时将会出现一个橙色的小框表示点击的响应。 此时，如果对元素设置了tap-highlight-color值，例如: -webkit-tap-highlight-color: rgba(24...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值