如何去除图像的边框？

Question

我在StackOverflow 示例 1 示例2 上创建了许多类似我的问题，但由于未知原因，我的图像周围仍然显示一些边框：

 .imgCadenas{
  width:  50px;
  height: 50px;
  background: url('/cadenas.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;

  border:0;
  border-style: none;

  position: absolute;
  right: 150px;
  top: 5px;
}

有人有解决方案吗？

[编辑] 根据您的建议，我在浏览器中有这个 CSS：

 .liMachine { list-style-type: none; border-style: solid; margin-bottom: 5px; word-break: break-all; position: relative; } .imgCadenas{ width: 50px; height: 50px; background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/256/sign-check-icon.png'); background-repeat: no-repeat; background-position: right; background-size: 100%; border: 0 !important; border-style: none !important; outline: none !important; display: block; position: absolute; right: 250px; top: 5px; } .whoLock{ position: absolute; right: 15px; top: 10px; }

 <li class="liMachine switch"> <div id="nameMachine"> <h3>My machine</h3> </div> <div id="stateMachine"> State:<span class="state">running</span> </div> <div> <img class="imgCadenas"> <p class="whoLock">Locked by: StackOverflow</p> </div> </li>

Answer 1

这可以在不同的浏览器上改变。 你可以试试border-style:none !important;

所以对于所有img：

img{border-style:none !important;}

或者只是为了你的 img

<img class="imgCadenas" src"">

.imgCadenas{border-style:none !important;}

如果您发送链接进行控制。 我可以找你。

Answer 2

尝试像这样修改：

.imgCadenas{
  width:  50px;
  height: 50px;
  background: url('/cadenas.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;

  border: 0 !important;
  border-style: none !important;
  outline: none !important;

  position: absolute;
  right: 150px;
  top: 5px;
}

已编辑

您的img元素缺少src属性，尝试将img元素更改为div元素。

另请参阅： https ://stackoverflow.com/a/22097004/4964262

Answer 3

将 !important 添加到您的 CSS 会删除边框吗？

Answer 4

尝试使用。

img {
    border:none;
    outline:none
}