ファイアウォールは、CSS（コンテンツ、URL）でイメージを表示しません。

Question

レスポンシブルページを作成します。デスクトップでは、テーブルとモバイルは異なる拡張子の画像である必要があります。 に画像を埋め込むと、img src = "...."と表示されます。 cssコンテンツにURL：の画像を埋め込むと、画像はFirefoxブラウザに表示されません。そして、私はそれを埋め込む必要がありますcss、画面のイメージを減らすので、別の画像がロードされます。ありがとう。

<div id="nav_image"> 
      <div id="images"> 
      <div class="div_images"><a href="#"><img src="" class="images" id="img1"></a></div> 
      <div class="div_images"><a href="#"><img src="" class="images" id="img2"></a></div> 
      <div class="div_images"><a href="#"><img src="" class="images" id="img3"></a></div> 
      <div class="div_images"><a href="#"><img src="" class="images" id="img4"></a></div> 
      </div> 
     </div> 

#nav_image #img1{ 
    content: url(http://images.apple.com/v/home/cm/images/promos/iphone_6s_large.jpg); 
} 

#nav_image #img2{ 
    content: url(http://images.apple.com/v/home/cm/images/promos/apps_for_earth_large.jpg); 
} 

#nav_image #img3{ 
    content: url(http://images.apple.com/v/home/cm/images/promos/macbook_large.jpg); 
} 

#nav_image #img4{ 
    content: url(http://images.apple.com/v/home/cm/images/promos/accessories_large.jpg); 
} 

Answer 1

imageはinline要素であるため。したがって、displayをblockまたはinline-blockに設定することができます。

JSBIN.