图形验证码如何美化？

Part.1 问题

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

不多说亮图：

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

就很看不过去了，反正我是受不了的！ 

Part.2 如何解决呢？

直接上代码吧：

HTML

  <img :src="src" @click="refreshCode">

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  

 

请求成功：

请求失败：