imgに枠線がついてしまう

Question

現状

HTMLで画像をリンクにしています。
同じ画像を使いまわすのでCSSにbackground-imageで設定しているのですが、どうしても枠線ができてしまいます。

imgタグの枠線が消えない | teratail
上記の質問も確認しましたが、解決されていないようでしたので質問させていただきました。

ソースコード

<a href="https://google.com" target="_blank"><img class="link1"></a>

img.link1{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVBhXZc47DsIwEEVRMYkUCidF3NiGAth/zRJAsBZ/ICixQsYSbwDR0F4dvZnVfDpWhzKo+ho0321zYzMtliOhjq3UZdig2olR2z4S7NnDunV6whoOqNW+0Ntum7R8rZY6djWJjbPJ2PVid+XRyQbBusyOg9LpYy9e7pHN2PWqTz+L33CP7J+V3yZ+AbP3aYA83o+CAAAAAElFTkSuQmCC);
    background-size: 20px;
    width: 20px;
    height: 20px;
}

試したこと

・border-style:none;
・border: 1px solid white;
・border: 0px;
いずれを試しても結果は変わりませんでした。

環境

Chrome

Comments

[itagagaki]

どうもChroniumはsrcで画像が指定されていない場合はグレーの枠線を描くようですね。
CSSでbackgroundを指定しても。

[Ito_Kazuki_]

ありがとうございます！
「srcで画像を指定しないと枠線を描く」というヒントから解決策がわかりました！

Answer 1

画像がない場合に表示領域を明示するためのborderなので、
ダミー画像を指定すればよいでしょう

<style>
.link1{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVBhXZc47DsIwEEVRMYkUCidF3NiGAth/zRJAsBZ/ICixQsYSbwDR0F4dvZnVfDpWhzKo+ho0321zYzMtliOhjq3UZdig2olR2z4S7NnDunV6whoOqNW+0Ntum7R8rZY6djWJjbPJ2PVid+XRyQbBusyOg9LpYy9e7pHN2PWqTz+L33CP7J+V3yZ+AbP3aYA83o+CAAAAAElFTkSuQmCC);
  width: 20px;
  height: 20px;
display:inline-block;
}
</style>
<a href="https://google.com" target="_blank"><img class="link1" src="data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""></a>
<a href="https://google.com" target="_blank"><span class="link1" ></span>

Comments

[yambejp]

そもそもimgにbackgroundImageを指定しようとすることが本末転倒な気がします
spanなどで空の領域をつくれば良い話です

Answer 2

一括で画像を指定したいならbackground-imageではなくcontent:url()で画像urlを指定してあげれば良いかと思います。
content-visibility: hiddenで出来ました。

Answer 3

修正依頼に「srcで画像が指定されていない場合はグレーの枠線を描く」とヒントを得ることができ、最終的に無理やりですが、できました。

srcで画像を指定しない場合枠が表示される
↓
Srcで画像を指定する必要がある
↓
background-imageを使って一括にしたいが、Srcで一括はできない。
Srcで何らかの画像をつけるとbackground-imageの画像はその後ろに出る
↓
srcの画像は透明にすればいい！

img.link1{
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACOSURBVBhXZc47DsIwEEVRMYkUCidF3NiGAth/zRJAsBZ/ICixQsYSbwDR0F4dvZnVfDpWhzKo+ho0321zYzMtliOhjq3UZdig2olR2z4S7NnDunV6whoOqNW+0Ntum7R8rZY6djWJjbPJ2PVid+XRyQbBusyOg9LpYy9e7pHN2PWqTz+L33CP7J+V3yZ+AbP3aYA83o+CAAAAAElFTkSuQmCC);
    background-size: 20px;
    width: 20px;
    height: 20px;
}

<a href="https://google.com" target="_blank"><img src="./view.png" class="link1"></a>
<!--view.pngは透明な画像-->

itagagakiさんありがとうございました！