无法去除图像周围的灰色边框？

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

看起来您的容器 (helloContainer) 是灰色背景的元素。右键单击该元素并使用 'Inspect Element' 查看活动 CSS.

Answer 2

这是因为图像元素需要 "src" 属性。灰色边框是占位符的一部分，浏览器将显示该占位符以代替图像。要删除它，您应该设置图像的 "src" 属性而不是使用 CSS 应用它，或者创建一个不同的元素，例如跨度。

无法去除图像周围的灰色边框？

Unable to remove gray borders around images?

javascript

css

image

border

styling