无法删除图像上的边框-CSS

Question

我正在为我的编码课程制作一个简单的游戏，但被图像周围这个奇怪的轮廓所困扰。 起初我以为是Bootstrap 3，但是当我将裸露的骨头插入jsfiddle时，我得到了相同的轮廓。 请注意，这不是在缩略图图像中设置的缩略图边框。 我曾考虑过覆盖一些边界@规则，但不知道该怎么做。

我已经重做了图像，以为这可能是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在这里： 小提琴

Answer 1

HTML：

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

CSS：

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

Answer 2

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

1）继续通过背景网址设置图片，但使用其他元素（可能是div）。

HTML：

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

CSS：

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

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

HTML：

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

CSS：

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

Answer 3

创建一个透明的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;
}