イメージの周囲に灰色の枠線を削除できませんか？

Question

何らかの理由で、画像の周りに灰色の枠線を削除できません。私はそれらを挿入するためにJavaScriptを使用しています。ありがとう！

var helloContainer = document.getElementById('hello-container'); 
 

 
    var helloImg = new Image(20, 20); 
 

 
function imgRepeater(e) { 
 

 
    var helloCount = e; 
 

 
    helloImg.className = 'hello-img'; 
 

 
    helloContainer.innerHTML = ''; 
 

 
    if (e != "0") { 
 

 
    for (var i = 0; i < helloCount; i++) { 
 

 
     helloContainer.appendChild(helloImg.cloneNode(true)); 
 

 
    } 
 

 
    } 
 
} 
 

 
imgRepeater(10);

.hello-img { 
 
    width: 20pt; 
 
    height: 20pt; 
 
    background-image: url("http://emojipedia-us.s3.amazonaws.com/cache/1a/01/1a010db8ee92e120595b5b8977a8328e.png"); 
 
    background-size: contain; 
 
    border: 0 !important; 
 
    outline: 0 !important; 
 
}

<div id="hello-container"></div>

Answer 1

イメージ要素に「src」属性が必要なために発生しています。灰色の枠線は、画像の代わりにブラウザが表示するプレースホルダの一部です。これを削除するには、CSSで適用する代わりに画像の「src」属性を設定するか、スパンなどの別の要素を作成する必要があります。

Answer 2

あなたのコンテナ（helloContainer）は灰色の背景を持つ要素であるように見えます。要素を右クリックし、[要素の検査]を使用してアクティブなCSSを確認します。