Firefoxのimg content urlとの非互換性

Question

「img src」をCSSファイルに設定しようとしています。私は使用できるさまざまな方法を研究しましたが、それはまだ機能していません。 ::後にcssを入れたら、Chromeでは動作しませんが、Firefoxではさまざまなスタイルで動作します。あなたがbutton要素にbackground-imageとして画像を設定することができます 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> 

Answer 1

： は、このソリューションについての考えを少し混乱します。 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>