Html 无法删除图像上的边框-css

我正在为我的编码课程做一个简单的游戏，我的图像周围的这个奇怪的轮廓难住了我。起初我以为它是Bootstrap3，但当我将这些基本内容插入JSFIDLE时，我得到了相同的轮廓。请注意，这不是在缩略图图像中设置的缩略图边框。我曾考虑过覆盖一些border@规则，但对于该尝试什么，我一无所知

我重做了这些图像，认为这可能是Inkscape的一些人工制品，但不是。如能在消除边界或使其透明方面提供任何帮助，我们将不胜感激

css，请注意注释掉的尝试：

#tommy img {        
    background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png); 
    height: 200px;
    width: 200px;      
  /*
  border: transparent !important;
  background: transparent;
  border-width: 0 !important;
  border: none !important;
  border: none;
  border: 0px;
  border-color: #7A45D2 !important; attempt to at least affect the darn thing.
  */
  }

还有一点html：

<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img>
</div>

汤米

jsfiddle在这里：

HTML:

<div id="tommy" class= "theGroup player-up">
<p>Tommy</p><img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png">
</div>

---

边框来自您使用的img标记，没有指定src，背景设置为图像。有两种方法可以解决此问题：

1） 继续通过背景url设置图像，但使用不同的元素（可能是div）

HTML:

2） 继续使用img标记，但通过src属性而不是背景设置图像

HTML:

---

创建一个透明的gif并将其保存在img文件夹中。然后使用这个代码。作品就像一种魅力，丑陋的边界消失了

<div>
    <img src="img/transparent.gif" id="tommy" class="theGroup player-up">
    <p>Tommy</p>
</div>

#tommy {
    background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
    height: 200px;
    width: 200px;
}

汤米

#汤米{
背景：url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
高度：200px；
宽度：200px；
}

谢谢，我使用了第二种方法！

<div id="tommy" class= "theGroup player-up">
  <p>Tommy</p>
  <div/>
</div>

#tommy div {        
  background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);   
  height: 200px;
  width: 200px;
}

<div id="tommy" class= "theGroup player-up">
  <p>Tommy</p>
  <img src="http://s32.postimg.org/4fdqh7dxh/tommy200.png"/>
</div>

#tommy img {        
  height: 200px;
  width: 200px;
}

<div>
    <img src="img/transparent.gif" id="tommy" class="theGroup player-up">
    <p>Tommy</p>
</div>

#tommy {
    background: url(http://s32.postimg.org/4fdqh7dxh/tommy200.png);
    height: 200px;
    width: 200px;
}