如何在CSS

Question

響應設置背景圖片的我在CSS reponsive背景圖片的問題，我的CSS代碼是： -

/*** Map ***/ 

ul#continents { 
    list-style: none; 
    background: url(images/map.png) no-repeat 0 0; 
    position: relative; 
    width: 580px; 
    height: 268px; 
    margin: 0; 
    padding: 0; 
} 
ul#continents li { 
    position: absolute; 
} 

ul#continents li a{ 
    display: block; 
    height: 100%; 
    text-decoration: none; 
} 

和HTML： -

<ul id="continents"> 
    <li id="northamerica"> 
     <a href="http://en.wikipedia.org/wiki/North_America"> 
      <span> 
       <strong>North America</strong> 
       Population: 528,720,588 
      </span> 
     </a> 
    </li> 

....

我該如何設置圖像「map.png」作爲響應。

注：我使用的地圖工具來得到任何國家

Answer 1

的懸停您可能需要使用background-size:與contain或cover。
contain：將保持您的背景圖像在ul標籤內部成比例，但可能無法覆蓋所有空間。
cover：會保持你的背景圖像的比例，但在標籤內部放置不當，會填滿標籤，防止出現空白區域。儘管如此，圖像可能不完全可見。