Grad-text not visible on image off

[YodaSpow]

Gradient Text not visible on image OFF for Alt text

If gradient text class gets used on Alt text Email HTML:

<img class="fw h4 grad-T" align="left" width="650" src="-https://currys-ssl.cdn.dixons.com/css/themes/email/_Rolling ...

Email CSS:

@media screen and (-webkit-min-device-pixel-ratio: 0)
.grad-T {
  background: -webkit-linear-gradient(left, #082b69 0%, #691c5b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

Current EmailTools CSS: (core.css) Image off toggle in Emailtools:

.altText img {
  background-image: url(https://currys-ssl.cdn.dixons.com/css/themes/email/Assets/emailTool/imgBG3.png)!important;
  min-height: 44px;
  min-width: 44px;
  box-shadow: inset 0 0 1px #b7b6b6, inset 0 0 15px rgba(255, 0, 255, 0.3);
}

The glitch:

The Fix - To be tested Have a fix that seems to be working

.altText img {
  /*Remove: background-image: url(https://currys-ssl.cdn.dixons.com/css/themes/email/Assets/emailTool/imgBG3.png)!important; */
  min-height: 44px;
  min-width: 44px;
  box-shadow: inset 0 0 1px #b7b6b6, inset 0 0 15px rgba(255, 0, 255, 0.3);
  position: relative; /* ADD */
}

/* ADD */
.altText img:before {
  position: absolute;
  top: 0;
  left: 0;
  content: " ";
  background: url(https://currys-ssl.cdn.dixons.com/css/themes/email/Assets/emailTool/imgBG3.png);
  width: 100%;
  height: 100%;
}

Chrome:

[YodaSpow]

Updated code now includes firefox conditional as that seems to have an issue with the -webKit text clip being transparent (firefox is purely for checking, its not even market-email-share for and client)

Basically javascript check on the browser to a fake image off:

.altText img { min-height: 44px; min-width: 44px; box-shadow: inset 0 0 1px #b7b6b6, inset 0 0 15px rgba(255, 0, 255, 0.3); position: relative; }
.altText img:before { position: absolute; top: 0; left: 0; content: " "; background: url(https://currys-ssl.cdn.dixons.com/css/themes/email/Assets/emailTool/imgBG3.png); width: 100%; height: 100%; }

@-moz-document url-prefix() {
  .altText img { -webkit-text-fill-color: inherit; }
}