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在这里：fiddle

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

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

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;
}

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

3 个答案: