带图像 bg 的 Img 类删除边框

【问题标题】：Img class with image bg remove border带图像 bg 的 Img 类删除边框
【发布时间】：2014-12-01 17:03:36
【问题描述】：

我有一个带有背景图像的 img 类，我有一个不寻常的灰色边框来制作一个盒子。我想删除边框，但使用边框：0px 并不能解决问题。

我提供了一个小提琴来复制我的工作。小提琴Here

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

&lt;img class="facebook" alt="Facebook Logo" /&gt;

【问题讨论】：

您将background-image 用于<img> 的任何原因
悬停时的过渡效果不适用于我之前的设置。我得想点别的办法。

标签： html css

【解决方案1】：

这是当您使用带有 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);
}

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

【讨论】：

是否可以添加一些过渡效果，例如淡入淡出，因为这是我切换到此设置的主要问题。
悬停例如？
是的，悬停。从 0.5 到 1 不透明度与过渡。但唯一有效的是不透明度，过渡代码被忽略。