博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图形验证码如何美化?
阅读量:4523 次
发布时间:2019-06-08

本文共 684 字,大约阅读时间需要 2 分钟。

Part.1 问题

在写项目时遇到的一个算是视觉问题吧,没办法,有强迫症   哈哈哈嗝~

不多说亮图:

这是我们正常调用后端接口后的效果,可是不正常的时候。。。

就很看不过去了,反正我是受不了的! 

Part.2 如何解决呢?

直接上代码吧:

HTML

JavaScript  

src: '/sysUser/auth/captcha'
refreshCode: function(){    this.src = "/sysUser/auth/captcha?t=" + new Date().getTime(); }

CSS

img {      float:left;      width:160px;      height:50px;      background: url("../assets/images/code_loading.gif") 60px 7px no-repeat;      &:before {          content: '';          position: absolute;          width: 160px;          height: 50px;          background: url("../assets/images/code-err-bg.png")      } }

  

Part.3 效果图

请求接口时,加载 img background  

 

请求成功:

请求失败:

 

转载于:https://www.cnblogs.com/langxiyu/p/10896023.html

你可能感兴趣的文章
python random
查看>>
互联网技术
查看>>
input输入框只允许输入数字/ 数字+小数点/ 文字+字母/ 等解决方法
查看>>
【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,前篇(2)...
查看>>
函数名、闭包及迭代器
查看>>
mysql 5.6 参数详解
查看>>
求旋转数组的最小元素
查看>>
jQuery ajax error函数(交互错误信息的获取)
查看>>
Gson解析Json数组
查看>>
Lintcode: Fast Power
查看>>
Pocket Gem OA: Log Parser
查看>>
枚举也能直接转换为对应的数值输出
查看>>
angularjs1-7,供应商
查看>>
BitSet
查看>>
Spring常用注解,自动扫描装配Bean
查看>>
(转载)深入理解WeakHashmap
查看>>
JAVA中的数组
查看>>
爬虫—使用Requests
查看>>
scrollIntoView()窗口滚动
查看>>
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
查看>>