解决移动端iPhone设备点击时出现半透明的灰色背景

问题:在iPhone设备上点击时会出现一个半透明的灰色背景。

解决办法:

html,body{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

学习随笔,我也是在网上看到的,随时记录下来。再根据自己理解整理,不对的地方望指正,感谢!

原文地址:https://www.cnblogs.com/xiaoweiba/p/9121626.html

时间: 2024-07-30 16:16:47

解决移动端iPhone设备点击时出现半透明的灰色背景的相关文章

解决panel或者其他控件叠加时,此控件背景透明,显示的背景色为窗体背景色问题

之前为了图省事儿,直接给Form窗体设置的背景图片,发现这样运行的时候窗体特别的卡顿,于是改为放一个pictureBox控件,由这个控件加载图片后作为背景. 现在卡顿解决了,又出现了另一个问题,运行时,因为panel控件背景色设置的透明,发现它显示的背景色为窗体背景色,而不是pictureBox里面的图片. 就这个问题想了好久,现在找到办法了.将panel下面的控件设置Parent 即可. this.panel1.Parent = this.picturebox1: http://www.cnb

iphone上点击div会出现半透明灰色背景

-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景.要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色. 想要禁用这个高亮,设置颜色的alpha值为0即可. -webkit-tap-highlight-color:rgba(0,0,0,0) 如果不行试试在背景上加个rgba(0,0,0,0) 详见:::h

fastclick.js解决移动端(ipad)点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

Xcode 6.1真机测试 8.1的iPhone设备时出现的编译错误的问题

如图:设备连接准备调试时出现21个错误.检查了各个环节都没问题(证书,设备连接状况...).然后我换了个7.1的iPhone 设备,调试顺利通过,这就奇怪了. 然后我就看了Xcode 5里面的配置.发现了区别 然后修改architectures 的值为 armv7 和armv7s就可以了 修改后的 这个里有关于 architectures的的介绍 http://www.cocoachina.com/industry/20140527/8566.html

input,button制作按钮IE6,IE7点击时1px黑边框的解决方法

按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn{ border:none;} <span class="btnbox"><input class="btn" type="button" value="按钮"></span> 第二种办法通过滤

移动端300ms的点击延迟以及解决方案

[今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡:只有两个关键帧,开始和结束: 2.动画可以设置多个关键帧 3.过渡必须通过事件去触发 4.动画不需要打开即可运动 [CSS执行速度更快,js事件触发执行,手机端点击类事件则会遇上300ms点击延迟,用户体验更差] 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击

移动端Click300毫秒点击延迟的来龙去脉(转)

原文地址:What Exactly Is….. The 300ms Click Delay 快速响应是所有 UI 实现的重中之重.研究表明,当延迟超过 100 毫秒,用户就能感受到界面的卡顿. 然而,出于对手指触摸滑动的区分,移动端页面对于触摸事件会有 300 毫秒的延迟,导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢. 本文主要讨论上述延时的来历,浏览器生产商的考虑,以及我们作为开发者,当前应该如何处理这个问题. 300 毫秒延迟的来历 这要追溯至 2007 年初.苹

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

移动端iPhone系列适配问题

问题一:苹果手机上的input按钮自带渐变效果 一样的代码,为啥在苹果手机上的input按钮就自带渐变效果,搞特殊吗?怎么让它显示正常?只需要加上outline:0px; -webkit-appearance:none; 清除原有样式,同时苹果手机上的input按钮自带圆角需要按需要去掉 问题二:表单input元素获取焦点时页面被放大的解决办法 原因:在iPhone上点击input框会有一个动画效果,这是苹果公司默认设置的,每次input获取焦点都会使页面放大,效果非常不好看,经过多方百度寻求到