Firefox 与 img 内容 url 不兼容答案

【问题标题】：Firefox incompatibility with img content urlFirefox 与 img 内容 url 不兼容
【发布时间】：2016-04-11 18:05:17
【问题描述】：

我正在尝试在 css 文件中设置“img src”。我研究了可以使用的不同方法，但它还没有奏效。如果将 ::after 放在 css 中，则在 Chrome 中不起作用，但在 Firefox 中使用不同的样式。有点困惑，关于这个解决方案的任何想法： https://jsfiddle.net/er1txx0z/

  <label class="control-label"></label>      
  <button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
    <img class="dcweb_search_img" />
  </button>


    <style>
    .dcweb_search{
    height: 60px;
    width: 60px;
    position: relative;
    top:-17px
    }
    .dcweb_search_img{
    width:40px;
    content:url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
    }
    </style>

【问题讨论】：

Firefox 不像 Chrome 那样支持 content 属性。 stackoverflow.com/questions/12262118/…
为什么不在img标签本身中设置src？
因为在CSS文件中不能设置图片的SRC，必须使用content-url。我无法在 HTML 标记中执行此操作，因为悬停时链接的图像不同！

标签： html css firefox styles

【解决方案1】：

您可以在button 元素上将图像设置为background-image。无需为img 标签而烦恼。

.dcweb_search {
  height: 60px;
  width: 60px;
  position: relative;
  top: -17px;
  background-image: url('https://api.icons8.com/download/c5c8b5ba35e008ea471e9a53c5fa74c03ef6e78c/iOS7/PNG/256/Very_Basic/search-256.png');
  background-size: 40px 40px;
  background-position: center;
  background-repeat: no-repeat;
}

<label class="control-label"></label>
<br>
<button id="btn1" class="btn btn-warning shadow dcweb_search" disabled="true">
</button>

【讨论】：

到目前为止我已经完成了这个解决方案，但它不能很好地处理我拥有的图标，反正 tnx 很多 :) 我应该更改图标