手机浏览器上，按钮、图片、文本框点击阴影遮罩

最新推荐文章于 2025-10-17 11:35:55 发布
转载 最新推荐文章于 2025-10-17 11:35:55 发布 · 1k 阅读 · 1
文章标签：

#图片阴影

本文介绍了一种通过CSS解决网页元素点击时出现高亮问题的方法。具体实现方式是设置透明的点击高亮颜色，适用于a标签、图片、按钮及输入框等元素。

加上下面的CSS样式就可以解决了。

a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}



转载自:http://www.xue163.com/330/1654/3308674.html

手机浏览器上，按钮、图片、文本框点击进去的时候有阴影，如何去掉？
weixin_33801856的博客
01-19 415
做好手机端页面的时候，点击按钮、图片、input文本框时会有***的阴影，加上下面的CSS样式就可以解决了。a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);} 转载于:https://blog.51cto.com/dsh109/1605531...
手机页面点击出现了阴影部分，而pc端没有
tempscript的博客
02-15 434
写好代码再移动端测试后，才发现 每次点击都有阴影部分出现，影响用户体验，查资料后，知道原来 是iphone私有属性的问题； 直接上css ： a,img,button,input,textarea,div{ -webkit-tap-highlight-color:rgba(255,255,255,0); }
前端学习css案例（2）-button阴影与改变颜色
m0_58777269的博客
03-26 927
在最开始submit-button里面的添加一个参数叫transition，有两个变量，第一个变量的内容就是需要变换的某个参数（本次采用的参数为opactiy），第二个变量的内容就是变换所需要的时间,一般采用0.15s会好一点；第四个是颜色,一般阴影喜欢和原按钮颜色一致，采用rgba（a的含义是opacity），四个参数，第四个参数就是opacity 本次采用了(0,0,0,0.15)此时会遇到一个问题：hover和active都会变换的很突然，没有丝滑，是很突然的改变了颜色。class后面跟着“
消除移动端webkit内核浏览器点击时出现的阴影
ChinaLiaoTian的博客
08-03 464
-webkit-tap-highlight-color: rgba(255,255,255,0);
移动端实现遮罩对话框
qq_40868755的博客
07-20 877
实现原理：  点击某一控件实现遮罩弹出会话框 原理就是点击后弹出两个div样式 。其中一个就是遮罩层  给他添加透明度即可实现遮罩，另一个就是对话框内容   <div class="mask" id="mask"></div> <div class="input_informatino" id="input_informatino"&gt
基于Swiper的移动端遮罩弹出菜单特效
描述中提到：“jQuery基于Swiper制作的移动端text文本框点击遮罩弹出菜单列表”，这说明整个功能模块是在jQuery框架基础上构建的，利用其简洁的选择器语法与DOM操作能力快速绑定事件、控制元素显隐以及动态渲染菜单...
【浏览器兼容性研究新视角】：360浏览器与Android软键盘交互冲突的深层次分析
# 摘要 随着互联网技术的发展，浏览器兼容性成为确保良好用户体验的关键因素。本文从新视角探讨了浏览器兼容性的...参考资源链接：[解决360浏览器Android版软键盘遮罩输入框问题](https://wenku.youkuaiyun.com/doc/3x970r2
百度翻译源码java-ui-components: 创新的CSS3 UI组件库
这些库提供了一系列的图像悬停效果，如放大镜效果、渐变遮罩效果等，可以在用户鼠标悬停在图片上时触发。 11. CSS3动画特殊效果： 除了基本的过渡和变换效果，CSS3动画还支持更高级的动画效果，如关键帧动画...
20、XAML与WPF：构建富用户界面的利器
最新发布
pink的博客
10-17 11
本文深入介绍了XAML与WPF在构建富用户界面中的应用。从XAML的基础语法、开发流程到WPF的高级视觉效果实现，涵盖控件属性解析、布局管理、图像特效（如阴影、倾斜、倒影和渐变透明）的实现方法。通过可视化设计工具与Visual Studio的协作流程，展示了如何将UI设计转化为功能完整的应用程序，并提供了完整的代码示例与事件处理扩展，帮助开发者全面掌握使用XAML和WPF创建现代化、交互性强的桌面应用的关键技术。
使用JavaScript实现对话框显示文字功能的设计方法
第三种是prompt() 方法，它不仅显示消息，还允许用户在文本框中输入内容，并通过“确定”或“取消”按钮提交或放弃输入。其基本用法为 `let userName = prompt("请输入您的姓名：", "张三");`，第二个参数为默认值。...
移动端a标签点击图片有阴影处理
weixin_30800807的博客
11-22 245
移动端我们在点击页面中的一些图片的时候会出现阴影。处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; } 　　 转载于:https://www.cnblogs.com/laneyfu/p...
移动端解决底部固定按钮遮挡页面内容
铁锤妹妹的博客
05-27 5075
问题描述 首先实现按钮固定在页面底部，需要设置按钮的position为fixed 然后页面一些内容被底部固定的按钮遮挡住了，导致显示不全 方法1 在页面内容最下面写一个透明div，设置这个透明div的宽和高； width: 100%; height: 60px; 方法2 在vue单页面最外面div加 padding-bottom：60px； 最终效果完美实现 ...
移动端，点击之后某个区域后有阴影
热门推荐
White feathe 的博客
03-01 1万+
移动端，点击之后某个区域后有阴影 今天偶然发现一件很奇怪的事儿。 在移动端，在我去掉css的伪类及其伪元素跟相关的js之后， 在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得 鬼，后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。 如图所示，我所遇到的状况：
手机端 弹出遮罩层 并且不可滑动
zeromike
08-17 2211
        最近用phonegap在安卓手机中使用Html5+css3做页面，         需求：在页脚导航按钮上，点击【同意】弹出一个页面，页面中是动态生成的单选按钮。         代码：          <div id="show"> <div data-role="controlgroup" id="btnGroups" data-typ...
移动端touchstart,touchend效果实现-点击图片出现阴影，滑动消失
mia1106的博客
01-15 2711
手机端要实现如下效果： 点击图片或长按图片，图片出现阴影效果，且可以跳转到相应的链接，滑动或者松开图片时，此效果都会消失。注意，屏幕可以正常滑动，而且阴影在字之下，图之上。 手机端的这种效果，我们使用touchstart,touchend来实现。 （1）首先要了解需要的事件 touchstart,是手指触摸屏幕是触发的效果，touchend,是手指从屏幕抬起时触发的事件， 而touchmo
HTML点击图片下方出现阴影,纯css实现图片点击时移动效果和阴影效果
weixin_42471893的博客
06-04 2014
有人喜欢用js加css实现这样的效果，而我比较喜欢用最简单的方法实现这样的效果，因为我是个简单的人，所以我要做最简单实用的事儿(hei hei)...好处就是：简单，方便操作，给服务器减少压力,对seo也比较友好...其实,实现的方法,说起来很简单，例如我想用CSS控制内容页的图片，那么我们就会用到标签属性 ：“article-neirong img{}”来实现，给内容页的图片增加 鼠标“点击时”...
去除移动端按钮点击时的阴影和rem标签垂直居中
weixin_30770783的博客
04-09 143
*{ -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */ } 使用rem设置height和line-height相同时文字没有居中？pc上模拟器模拟出来的是垂直居中的没错，但是在实际手机中，苹果手机...
去除手机页面点击元素的阴影
kwin的博客
12-31 1591
手机端部分浏览器，tap后会出现一个半透明的灰色背景，这是tap后的背景高亮，要重设这个表现，则需要设置-webkit-tap-highlight-color为所需色彩，直接透明吧：a, img, button, input, textarea { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-co
解决360浏览器文本框软键盘遮罩问题的方法
在开发过程中，遇到了一个特定于360浏览器的问题，即当用户在Android设备上使用360浏览器点击筛选按钮后，弹出的fixed层内的文本框在输入时会被系统自带的软键盘遮挡。这个问题在其他浏览器如Chrome中则没有出现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值