首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用CSS消除chrome(安卓系统)中<img>元素的“点击效应”

在Chrome(安卓系统)中,<img>元素的默认样式会产生点击效应(即点击图片时会出现阴影效果),如果想要消除这种点击效应,可以使用CSS来实现。下面是一种实现方式:

  1. 针对<img>元素,添加以下CSS样式:
代码语言:txt
复制
img {
    -webkit-touch-callout: none; /* 禁用长按页面时的选中效果 */
    -webkit-user-select: none; /* 禁用用户选择文本内容 */
    -webkit-tap-highlight-color: transparent; /* 点击时不显示任何颜色效果 */
    pointer-events: none; /* 禁用元素的点击事件 */
}
  1. 使用该样式后,<img>元素将不会显示点击效果,也不能触发点击事件。

CSS样式说明:

  • -webkit-touch-callout: none; 禁用长按页面时的选中效果。
  • -webkit-user-select: none; 禁用用户选择文本内容,防止长按图片时弹出文本选择框。
  • -webkit-tap-highlight-color: transparent; 点击时不显示任何颜色效果,即不显示点击效果。
  • pointer-events: none; 禁用元素的点击事件,使得图片无法触发点击事件。

这样,<img>元素在Chrome(安卓系统)中就不会出现点击效应了。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络)

  • 链接地址:https://cloud.tencent.com/product/cdn

腾讯云CDN是一种将静态内容分发到全球多个节点,提供快速访问速度和高可用性的服务。它可以帮助加速图片等静态资源的加载,提升网页打开速度,提供更好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【调试】939- 5个Chrome调试混合应用技巧

一、调试应用 在进行混合应用开发过程,经常需要在应用调试 H5 项目的代码,这里我们就需要了解应用如何在 Chrome 上进行调试。...准备工作 需要准备有一下几个事项: 包必须为可调试包,如果不可以调试,可以找原生同事提供; 手机通过数据线连接电脑,然后开启“开发者模式”,并启用“USB 调试”选项。 2....Chrome 启动调试页面 在 Chrome 浏览器访问“chrome://inspect/#devices”,然后在 WebView 列表中选择你要调试页面,点击“ Inspect ”选项,跟调试...二、筛选特定条件请求 在 Network 面板,我们可以在 Filter 输入框,通过各种筛选条件,来查看满足条件请求。 使用场景: 只需要查看失败或者符合指定 URL 请求。...这里输入“-”目的是为了让大家能看到 Chrome 提供哪些高级选项,在使用时候是不需要输入“-”。如果输入“-.js -.css”则可以过滤掉“.js”和“.css”类型文件。

2.1K20
  • ReactJs移动端兼容问题汇总

    汽车H5使用ReactJs问题汇总 Q:4.4webview显示空白?...所以如果要兼容低版本浏览器可以引入一个全局 polyfill,例如 core-js 或 babel-polyfill。 ? Q:低版本点击事件不生效?...A:调试检查发现该点击事件中使用了for of语法,无法兼容低版本,使用map或forEach方法替换即可。 Q:使用@import导入css文件没有被autoprefixer自动添加前缀?...2.使用rem单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。 由于网上方法都不好使,后来想了个办法,把用到line-height设置垂直居中标签都换成button。。。...chrome://inspect/#devices访问已启用调试 WebView 列表;点击inspect即可调试,如无法调试页面空白FQ即可。

    2.1K50

    position:sticky兼容性尝试

    在忙碌完公司发布系统之后,逐渐接触到具体业务。在这里主要介绍下关于css3草案position:sticky属性兼容。...问题 目前前端h5有个需求,就是“当页面上若干个标题被拖动到视口顶部时,则显示一个被定位到视口顶部tab标签,可对这个tab标签进行点击导航,并在某个特殊情况下隐藏”。...但是在这里可能会出现一些性能问题: + 在浏览器端和设备上,scroll事件连续触发,如果在侦听函数做过于复杂判断,肯定会暂时阻塞ui(主)线程渲染,造成卡顿 + 每次在侦听函数中都执行一次...,只在滑动结束时刻执行一次,并且不支持左右滑动事件触发 针对上述问题进行修复,其实并不困难: + 针对scroll做throttle节流,避免每次滑动都执行,可以设置时间间隔,50ms + 在侦听函数中计算元素...在pc和chrome并未实现该属性,而在pc和iOS safari全部兼容该属性,因此针对iOS可以单独使用sticky完成兼容。

    3.7K100

    移动端重构实战系列6——icon与图片

    绘制功能交给伪元素before和after 伪元素采用绝对定位居中 颜色使用currentColor 这样做可以带来两个好处,一是可以方便设置icon-search大小(扩大点击范围同时,还保持水平垂直居中....item-img{ width: 100%; } 其中mixin object-wrap在sandal定义如下(具体解释可参阅css如何做到容器按比例缩放): // object wrap...,说起来又是个悲伤故事,虽然css3background-size已经非常强大了,但是强大阵线总有某些机子总是拖了一大截后腿。...首先4.3-不支持background-size缩写,这倒没什么,再另写一行就是了,关键是有些4.3-还不支持百分比单位。...然后设置background-size为cover即可 或者按照第二种情况,使用img元素,外面再嵌套一层wrap设置高度 PS:默认看到大概是图片下面的四分之三(我并没有去量尺寸,根据经验猜测而已,

    88350

    移动端重构实战系列6——icon与图片

    绘制功能交给伪元素before和after 伪元素采用绝对定位居中 颜色使用currentColor 这样做可以带来两个好处,一是可以方便设置icon-search大小(扩大点击范围同时,还保持水平垂直居中....item-img{ width: 100%; } 其中mixin object-wrap在sandal定义如下(具体解释可参阅css如何做到容器按比例缩放): // object wrap...,说起来又是个悲伤故事,虽然css3background-size已经非常强大了,但是强大阵线总有某些机子总是拖了一大截后腿。...首先4.3-不支持background-size缩写,这倒没什么,再另写一行就是了,关键是有些4.3-还不支持百分比单位。...然后设置background-size为cover即可 或者按照第二种情况,使用img元素,外面再嵌套一层wrap设置高度 PS:默认看到大概是图片下面的四分之三(我并没有去量尺寸,根据经验猜测而已,

    71110

    手机端页面在项目中遇到一些问题及解决办法

    点击消除背景闪一下 css:-webkit-tap-highlight-color:transparent; 5.Ios 键盘换行变为搜索? 首先,input 要放在 form 里面。...所以要想用 JS 模拟点击 A 标签事件,就得先往 A 标签文字添加能被 JS 捕获元素,然后再用 JS 模拟点击元素即可。但是我觉得不合理,虽然找不到原因但是解决办法还是有的。...(1) 规范中有规定:如果元素 transform 值不为 none,则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1 不只在手机上,电脑上也一样。...在上面,点击页面底部输入框,软键盘弹出,页面移动上移。 而 ios 上面,点击页面底部输入框,软键盘弹出,输入框看不到了。。。...alpha值为0去除部分机器自带效果; //winphone系统,点击标签产生灰色半透明背景,能通过设置去掉; //特殊说明:有些机型去除不了,小米2。

    3.5K30

    【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)

    HTML允许用户在网页中加入各种元素文本、图像、链接、表格、列表、视频等,从而构建出结构化文档。 2 -> HTML结构 2.1 -> 认识HTML标签 HTML代码是由“标签”构成。...例如设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同等级,分辨率也是五花八门,设备上一个css像素相当于多少个屏幕物理像素,也因设备不同而不同,没有一个定论。...例如设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同等级,分辨率也是五 花八门,设备上一个css像素相当于多少个屏幕物理像素,也因设备不同而不同,没有一个定论...例如设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同等级,分辨率也是五 花八门,设备上一个css像素相当于多少个屏幕物理像素,也因设备不同而不同,没有一个定论...例如设备根据屏幕像素 密度可分为ldpi、mdpi、hdpi、xhdpi等不同等级,分辨率也是五花八门,设备上一个css像素相 当于多少个屏幕物理像素,也因设备不同而不同

    5010

    touch-action导致页面无法滚动

    前言 相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程一些探索经历。...就是ios基本都可以,但是页面滚动都没了。这是为什么呢?这个就要看下touch-action更官方触摸说明了。 默认情况下,平移(滚动)和捏手势由浏览器独占处理。...这意味着在实践,触摸动作通常只应用于具有一些自定义行为单个元素,而不需要在该元素任何后代上明确指定触摸动作。手势开始后,触摸动作值更改将不会对当前手势行为产生任何影响。...这就是上无法页面滚动原因。 为什么ios没有受影响呢,我觉得可能是ios默认支持touch事件原因吧。如果你知道底层原因或者详细文档说明,可以告诉我哦。...联想到这些机型,那么定位到可能是 :代码兼容部分版本过低,这些不支持;代码某部分是对ios和卓有区分解释,和系统有关,版本无关。

    4.2K00

    移动端真机调试方法总结

    最近要分析web页面,在和ios上性能差异,除了操作系统本身不同之外,应该还多地方要探究,第一步就是要在真机上分析。所以总结一下几个方法。...mac打开safari浏览器(菜单->开发->对应手机名称->要调试页面),点击即进入Safari Developer Tools,如图: ?...缺点:不能调试webView里面的页面 手机+数据线+电脑 步骤: 用数据线将手机与电脑相连 手机开启use调试(不同机型开启步骤不尽相同,不知道百度一下) 打开chrome,输入chrome...缺点:可以说是极简主义了,步骤简单、调试简单、能调也简单(就是查查元素,看看控制台,不能像chrome那些分析工具一样) vConsole+whistle 步骤: 安装 whistle 后打开面板,在...写代理规则, https://baidu.com/ js://{vConsole.js} 这样在手机看,就会有个控制台出现,能看到 console.log 出来东西,如图: ?

    1.7K10

    打造H5动感影集爱恨情仇【动画性能篇】

    Timeline是一款基于录制工具,通过录制在浏览器一系列操作,系统会记录这个过程所有细节数据,包括js计算、页面重绘、复合层消耗等,同时还保存着这个过程每一帧截图。...2.前景放大动画 在邀请函模板里有一个前景由小变大动画,但是在机上产生了严重渲染异常,如下图: ? 在IOS机器上没有重现,循例我查看了timeline。...结论: 背后动画可能会影响当前动画播放,在4.0系统都会产生渲染异常问题,因此应该把不在当前播放动画停掉。 3.逐帧渲染bug 更多性能问题都不会产生严重表现,最多是一点卡顿。...2.动画坑点 兄弟元素间动画互相影响 当前播放动画会因为其他结点动画还没结束而收到影响,机器上会呈现逐帧渲染表现。...3.巧妙使用css动画 这是一些用CSS3来解决一般JS效果做法。 ? ? 4.是否都要GPU加速? 最后,讨论一下这个问题。开启GPU加速固然会让页面动画更流畅,但是否表示所有元素都要开启?

    1.6K121

    打造H5动感影集爱恨情仇(动画性能篇) - 腾讯ISUX

    Timeline Timeline是一款基于录制工具,通过录制在浏览器一系列操作,系统会记录这个过程所有细节数据,包括js计算、页面重绘、复合层消耗等,同时还保存着这个过程每一帧截图。...效果如图: 结论: 背后动画可能会影响当前动画播放,在4.0系统都会产生渲染异常问题,因此应该把不在当前播放动画停掉。...3.逐帧渲染bug 更多性能问题都不会产生严重表现,最多是一点卡顿。但是4.0渲染异常却是常会出现,为此我再找一个例子。...2.动画坑点 兄弟元素间动画互相影响 当前播放动画会因为其他结点动画还没结束而收到影响,机器上会呈现逐帧渲染表现。...3.巧妙使用css动画 这是一些用CSS3来解决一般JS效果做法。 4.是否都要GPU加速? 最后,讨论一下这个问题。开启GPU加速固然会让页面动画更流畅,但是否表示所有元素都要开启?

    1.3K40

    移动端H5页面开发坑点指南

    ;number默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间 问题3:部分手机出现样式问题...,所以苹果系统系统通常都会禁止自动播放和使用JS触发播放,必须由用户来触发才播放;解决方法思路:先通过用户touchstart触碰触发播放并暂停(让音频开始加载),后面用JS再操作就没问题了;解决代码...是最简便方式,然而ios不支持 目前解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时转动值 ios防止长按页面元素被选中 解决:加入样式可禁止用户进行复制,ios和一般都可以解决...text-size-adjust: 100%; 某些情况下非可点击元素(label,span)监听click事件,ios下不会触发 针对此种情况只需对不触发click事件元素添加一行css代码即可...onclick=""就好了,: ioslocation.href跳转页面空白 在location.href外套一层setTimeout就解决了!

    3.1K10

    能让你受益匪浅10个css使用技巧

    CSS技巧大杂烩 01 Safari z-index层级问题 在Safari浏览器下(此Safari浏览器包括iOSSafari,iPhone上微信浏览器,以及Mac OS X系统Safari...02 文字居中兼容 正常处理文字上下居中手段是让元素height和line-height相等,但是环境下当字体大小<14px/0.7rem时候会出现居中失效情况。...解决方法: 判断系统环境(/IOS)分别作微调; font-size、height、width全部放大为2倍,利用transform进行缩放 height: 1rem; width: 2rem; font-size...第二个a不能跳转,我就想那我通过点击事件来跳转可以不,结果绑定任何事件都不生效。 解决方法: 然后测试发现,在旋转过程(只要未完全旋转90度)点击还是能一切正常。...css,当padding-top/bottom值为百分比时,其值都是以其父元素宽度为参照对象。

    1.6K20

    企鹅电竞weex实践之UI篇

    2、避免在image标签上使用v-for,否则会导致上图片渲染异常(slider图片)。 4、透明度 以下是涉及到颜色相关属性对透明度支持度列表。...5、点击态 项目比较常见点击态多半是透明度变化,如按钮、列表、链接等,css做法是添加伪类 (:active),weex也同样支持,但是weex需要在原样式添加 opacity:1,否则点击后回不到初始状态...环境下容器如果设置了宽高,那么子元素不能超出容器范围。...建议:fixed定位不会受父容器影响,如果需要超出限制,子元素可以设置fixed 9、v-if问题 在做一些操作切换状态时(如按钮点击置灰),应尽量避免使用v-if,使用v-if会闪,且部分机子会发生不可描述事情...这种布局方式在css要做到很容易,而在weex利用提供flex布局确很难实现,最后解决方案是通过js动态设置文字与标签父级宽度,从而控制文字溢出。

    1K20

    面试简书(五)

    c.懒加载 当我们打开一个页面时,浏览器就会从上往下读取页面标签src地址,并且开启线程来进行加载。.../article/details/83576364 2.视频在上面(无法设置优先级) 1.端下video标签播放时会被浏览器接管。...此时已经脱离了文档流,并且与文档已经非同层了,所以设置z-index是无效。 2.下qqx5内核浏览器,提供了相关属性。分别为:x5-playsinline:行内播放。...以下内容范围: 1.在video未被播放之前,video标签属于正常文档元素,z-index也是生效。此时层级高dom可以展示在video标签区域上方。...=”file”]控件,打开系统文件选择对话框,从而达到选择文件并上传目的。

    1.1K10

    【Web技术】929- 前端海报生成不同方案和优劣

    一、背景 工作做了很多生成海报功能,不同需求,不同场景,使用了几种方案,各有优劣。...✅ 6.0 koobee ✅ 5.0.2 vovoY51A 微信版本-内置 ✅ 7.0.3 ✅ 7.0.22 ios ✅ 14.2 ✅ 11.2.1 ios微信内置 ✅ 7.0.20 ✅ 7.0.1...第二次或第三次正常 解决方案,2~3次调用,取最后一次(看issue里有些机型还是不支持) 3.低端机上会出现失败情况,主要是文字问题(这里是我写过记录,不是很确定) ?...:动态变化数据,需要接口支持) svg to img 直接domtoSvg也有失败问题 let svg = 接口获取svg(参考年度账单) let svgBase64: string =...优点 不需要考虑兼容性等问题 缺点 不支持字数或字体类型过多,服务器压力较大(看具体实现方案),元素越多,接口越慢 这个方案其实也是用后端逻辑实现了绘制元素,输出图片(过程遇到问题:换行情况下需要计算字体高度

    1.5K40

    你想要Fiddler抓包实操小技巧

    数据(指cookie,html,js,css等文件)。...; (4)对于手机:在手机自带浏览器地址栏输入安装fiddler电脑IP+fiddler端口8888(:192.168.1.100:8888),进行下载和安装证书,也完事(注意:有的机会提示安装证书要设置锁屏密码...,按照提示设置即可); (5)接下来和上面说抓取http数据请求一致,设置手机网络代理,整个流程完毕; 注意 7.0及以上手机系统默认不识别我们安装证书,9.0以上只识别系统明文证书...解决办法 1、换ios手机或者系统7以下手机进行抓取数据请求。...,此处需要仔细查找带有FiddlerRoot字样,并删除,以谷歌浏览器为例说明,在浏览器上输入: chrome://settings/; (3)打开fiddler,点击工具栏Tools—>Options

    1.6K20

    中高级前端必须注意40条移动端H5坑位指南 | 网易三年实践

    提及系统包括Android和基于Android开发系统 提及苹果系统包括iOS和iPadOS 本文针对开发场景是移动端浏览器,因此大部分坑位解决方案在桌面端浏览器里不一定有效 解决方案若未提及适用系统就默认在系统和苹果系统上都适用...元素滚动操作可能会存在卡顿,但系统不会出现该情况。...select option { direction: rtl; } 修复点击无效 在苹果系统上有些情况下非可点击元素监听click事件可能会无效,针对该情况只需对不触发click事件元素声明...解析有效日期 在苹果系统上解析YYYY-MM-DD HH:mm:ss这种日期格式会报错Invalid Date,但在系统上解析这种日期格式完全无问题。...当然系统也支持该格式,然而接口返回字段日期格式通常是YYYY-MM-DD HH:mm:ss,那么需替换其中-为/。

    4.3K22

    移动端Web页面常见问题解决

    浏览器看背景图片,有些设备会模糊。 用同等比例图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?...用input监听键盘keyup事件,在手机浏览器是可以,但是在ios手机浏览器变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!...另外一个是form提交时候,默认给取整了。三是部分手机出现样式问题。...,input type=number,一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step。...-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; 关于 iOS 系统,中文输入法输入英文时

    1.8K20
    领券