用CSS自動調整大小的背景上的圖像映射

Question

我對CSS很新，我偷了一些代碼，並以我想要的方式爲我工作，我開發了一些理解嘗試了許多不同的方式來做我想做的事情，但有點失落之後。

我想完全按照標題所說，圖像映射，同時允許我嘗試實現自動調整大小。顯然，我試圖讓我的網站在大多數分辨率下看起來都不錯，而不會影響我想要的設計。我的代碼的網站到目前爲止低於：

http://blunderphonics.0sites.net

我會用做舊的HTML的方式完成，但我不希望任何邊界，這似乎並不允許（因爲你不能用背景映射地圖）。

請幫幫忙，它把我逼瘋

Answer 1

不知道，你可以使用圖像映射做到這一點，因爲你必須像素完美的座標傳送給該地區的標籤。

但是，我會建議幾個標籤爲每個這些領域。設置每個鏈接以顯示：塊和大小，並用百分比定位它們（​​就像你在「bg」類中做的那樣）。

例如，鏈接，那頂桂冠跨越整個頁面可能樣式是這樣的：

#home-link { 
    display:block; 
    width:90%; 
    height:10%; 
    position:absolute; 
    top:2%; 
    left:5%; 
} 

這僅僅是一個例子，這些數字是完全錯誤的。我只是將它們用於演示目的。你想要做的就是對該圖像進行一些測量，並根據整個文檔的百分比計算出這些鏈接的尺寸和位置。例如，如果鏈接距離頂部100像素，並且圖像高度爲1000像素，那麼您會將該鏈接的頂部屬性設置爲10％。

希望這會有所幫助。