图片被拖动问题的解决方式

对有些图片的会被拖动的问题,是不是表示已经厌倦了,累觉不爱啊,我也经常会有遇到图片被拖动的问题

来来来,上图:

这是我遇到的问题,明显的可以看到图片已经被我拖出去,有一个重影(红色框出)

错误代码.html

<img data-ng-src="{{ror > 0 ? 'assets/usb/arrow_up.png':'assets/usb/arrow_down.png'}}" alt="icon">

我测试过所有用<img>写的代码都会被拖动,建议不要使用<img>

解决方式如下:

正确代码.html

<div data-ng-class="ror > 0 ? 'pr-account-tab_account-return__icon_up':'pr-account-tab_account-return__icon_down'"></div>

正确代码.css

.pr-account-tab_account-return__icon_up{
	background-image: url(usb/arrow_up.png);
	width: 16px;
	height: 16px;
	background-size: 16px 16px;
	position: relative;
	left: 7.5px;
	top: 7.5px;
}

.pr-account-tab_account-return__icon_down{
	background-image: url(usb/arrow_down.png);
	width: 16px;
	height: 16px;
	background-size: 16px 16px;
	position: relative;
	left: 7.5px;
	top: 7.5px;
}

改变成用background-image的方式,找到图片的位置,放到<Div>标签中而不是<img>中就可以愉快的解决这个问题啦~

注意要重新定位下,不然图片会到最上方去。

是不是棒棒哒?~

PS:data-ng-class="ror &gt; 0 ? ‘pr-account-tab_account-return__icon_up‘:‘pr-account-tab_account-return__icon_down‘"

是一个三元表达式(angularJS中使用),如果:

ror结果 >0  :使用pr-account-tab_account-return__icon_up这个class

ror结果 <0  :使用pr-account-tab_account-return__icon_down这个class

时间: 2024-11-05 13:33:54

图片被拖动问题的解决方式的相关文章

关于UISegmentedControl无法直接设置图片的解决方式

出现此种情况是由于,uiSegmentedControl的tintColor属性覆盖图片,如果设为透明色将直接无图显示: 解决办法是叫美工帮忙设计一张图片,图片的背景色设置为透明的,用uiSegmentedControl的tintColor作为图片的背景色,如此,视觉上就是加图的效果了. 当选中时,在触发的方法里在改填充色就可以了 关于UISegmentedControl无法直接设置图片的解决方式

[移动端]移动端上遇到的各种坑与相对解决方式

mobileHack 这里收集了很多移动端上遇到的各种坑与相对解决方式 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click.由于在touch事件触发之后,浏览器要推断用户是否会做出双击屏幕的操作,所以会等待300ms来推断,再做出是否触发click事件的处理.所以就会有300ms的延迟 解决方法:使用touch事件来取代click事件.如

升级iOS8和iOS9系统后,保险箱Pro、私人保险箱、私密相冊打开就闪退的官方解决方式

升级iOS8和iOS9.iOS10系统后,保险箱Pro.私人保险箱.私密相冊打开就闪退的官方解决方式 查看设备iOS操作系统版本号号办法:iPhone/iPad->设置->通用->关于本机->版本号 a.假设iPhone/iPad操作系统是iOS8.3之后(比方iOS8.3.iOS8.4.iOS9.iOS10),则关闭全部网络或开启飞行模式,看保险箱Pro还闪退不.假设不闪退,则立即进入闪退app(保险箱Pro.私人保险箱.私密相冊).上传全部照片和视频到手机系统相冊.以后使用这个

spring mvc 图片上传,图片压缩、跨域解决、 按天生成目录 ,删除,限制为图片代码等相关配置

spring mvc 图片上传,跨域解决 按天生成目录 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ #fs.domains=182=http://172.16.100.182:18080,localhost=http://localhost:8080 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be

常见浏览器兼容性问题与解决方式

所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发者常常会碰到和必需要解决的问题. 在学习浏览器兼容性之前,我想把前端开发者划分为两类: 第一类是精确依照设计图开发的前端开发者,能够说是精确到1px的,他们非常easy就会发现设计图的不足,而且在非常少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览

openlayers加载地图没有图片时有红叉的解决方法

解决方式:设置样式隐藏图片 <style type="text/css"> .olImageLoadError { /*ol2.12 onImageLoadError no longer exists, replace */ display: none !important; } </style>

SQL Server统计信息:问题和解决方式

在网上看到一篇介绍使用统计信息出现的问题已经解决方式,感觉写的很全面. 在自己看的过程中顺便做了翻译. 因为本人英文水平有限,可能中间有一些错误. 假设有哪里有问题欢迎大家批评指正.建议英文好的直接看原文:SQL Server Statistics: Problems and Solutions 正文: SQL Server统计信息协助查询优化器计算执行查询的最优方式. Holger描写叙述了常见的统计信息出错的事情,而且怎样改善 通常你不须要太操心运行SQL查询的方式.他们被传送到查询优化器,

【Mac双系统设置系统默认启动系统】解决方式

解决方式1: 开机时长按option键,进入系统选择界面: 用左右方向键选择到你要设置为默认启动的盘, 然后同一时候按下ctrl+enter键.就可以将其设置为默认启动的系统. 解决方式2: 选择mac系统进入后, 点击 系统偏好设置----->启动磁盘----->进入例如以下图界面: 首先点击最以下的锁图片.然后再进行更改, 选择你要设置为默认启动的系统后,点击又一次启动button生效.

uploadify在火狐下上传不了的解决方式,java版(Spring+SpringMVC+MyBatis)具体解决方式

?? 因为技术选型的原因,在一个产品中.我选择了uploadify,选择它的原因是它有完好的技术文档说明(http://www.uploadify.com/documentation/),唯一不足的是官方文档上的样例是用php写的. 而对与我们这些使用Java语言的小生们而言,在遇到问题后发现找到一个适合自己的样例非常不好找.特别是当遇到浏览器兼容问题的时候,找了好久终于发现依照网上的方式进行编写了,终于还是会出现莫名其妙的问题,而继续查找资料的时候,发现解说的并不具体. 以下我就把我遇到的这些