去除带有背景图片的Img元素边框

Question

我有一个带背景图像的img类，并且它带有一个异常灰色边框形成一个盒子。我想要去掉这个边框，但是border:0px并不能解决问题。

我提供了一个fiddle来复制我的工作。Fiddle 在这里

.facebook {
  background: url(http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png);
  background-size: 50px 50px;
  border: 0px;
  width: 50px;
  height: 50px;
}

<img class="facebook" alt="Facebook Logo" />

- MIke

---

你为什么要在<img>标签中使用background-image呢？ - Vitorino fernandes

我的之前的设置在鼠标悬停时没有过渡效果，我需要考虑其他的方法。 - MIke

Answer 1

当您使用带有a src属性的img元素且该属性设置为不存在或不具有src时，会出现默认边框。只需使用src属性即可：

.facebook {
  width: 50px;
  height: 50px;
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.facebook:hover {
  opacity: 0.2;
  filter: alpha(opacity=20);
}

<img class="facebook" alt="Facebook Logo" src="http://dev.truewarpit.com/play/wp-content/themes/FoundationPress-master/img/icons/facebook.png" />

- Alex Char

---

能否给它添加一些过渡效果，比如淡入淡出，因为这是我转换到这种设置的主要问题。 - MIke

例如，鼠标悬停？ - Alex Char

在悬停时，将透明度从0.5变为1，并带有过渡效果。但是唯一起作用的是透明度，过渡代码被忽略了。 - MIke