處理此背景圖像問題的最佳方法是什麼？

所以我作出了網頁地圖美國作爲「背景圖片」，並在該地圖我有大約10個標記指向特定位置的頂部。標記不是圖片的一部分，只是我將它們與絕對定位和頂部和左邊的百分比相加。

問題：

當我縮小頁面或上下滾動，我設置絕對定位標記開始搬離現場，他們都假設是對因爲背景 - 圖像越來越小，它顯示100％。

問題：

如何能夠做到什麼，我想在那裏它們被假設爲窗口正在縮小爲不移動地圖上的標記？

現在我知道只有1個解決方案，這個解決方案可能需要很長時間。我在想的是不用在地圖上放置我想要的標記，而是使用像素來做到這一點，然後使用媒體查詢的TON並不斷調整它。這個解決方案不僅需要很長時間，而且似乎也不是正確的解決方法。

HTML：

<div class="container main-content"><!--the map background image is set here--> 
<div class="row relative"> 
    <div class="eq-content-wrap"> 
     <div class="eq-content"> 
      <div class="marker"></div> <!--the marker that is positioned absolute--> 
     </div> 
    </div> 
    </div>

CSS：

html, body{ 
      width: 100%; 
      height: 100%; 
      margin: 0px; 
      padding: 0px; 
      background: #000; 
} 
body{ overflow: hidden; } 

.main-content{ 
       background: url('assets/img/map1.jpg') no-repeat top center; 
       background-size: contain; 
       height: 100% !important; 
       width: 100% !important; 
} 
.eq-content-wrap{ 
       position: absolute; 
       width: 500px !important; 
       top: 22%; 
       left: 40%; 
} 

.marker{ 
         height: 40px; 
         width: 40px; 
         border-radius: 100%; 
         background-color: red; 
         position: absolute; 
         top: 50%; 
         margin-top: -20px; 
}

來源

2015-07-10 Lucas Santos

您是否嘗試過使用'em'，而不是'px'定位標記？ 'em'的縮放比'px'要好很多。此外，而不是絕對位置，嘗試相對定位或相對邊距。如果您可以將我鏈接到工作頁面，我可以提供更好的幫助。 –

此外，您可能會發現有用的HTML圖像映射：http://www.w3schools.com/tags/tag_map.asp –

@BJSafdie看起來非常有趣，可能是解決方案，我將檢查它。 –

的問題是，你的背景圖片的大小設置爲100％：background-size: 100%。這意味着，當瀏覽器試圖縮放內容時，背景不會隨之擴展（它保持100％）。

最好的辦法是徹底刪除background-size財產。這允許標記在頁面縮放時保持原位，但是，您不會獲得當前擁有的全屏背景效果（除非您有更大的圖像）。

但是，一旦瀏覽器窗口寬度小於圖像寬度，背景仍然會移動。這是因爲您將背景位置設置爲頂部居中。該中心是當瀏覽器窗口寬度小於圖像寬度時導致它移動的原因。將中心更改爲左側，它將解決該問題。您還需要將標記的容器設置爲位於左側，以便在更寬的屏幕上工作。基本上，刪除所有中心屬性將有所幫助，但屏幕不會以寬屏幕爲中心。

來源

2015-07-10 00:52:06

經過數小時的努力，我想出了一個適當的解決方案使用你的方法和我的一些。我將背景圖像的元素從左側放置爲50％，沒有背景大小。然後這裏有個訣竅，可以說我有一個1000像素的圖像，我用絕對縮放和負邊距來縮小它，如果縮放到1000像素以下，圖像開始被切掉，所以我添加了媒體查詢的大小圖像和左圖：0而不是50％，這一切都非常好。非常感謝Wes非常感謝他。 –

媒體查詢是一個很好的補充，盧卡斯！我很高興我的長時間反應和冷晚餐不是徒勞:) –

代替css:before代替.marker;設定個單位值利用calc()

html, 
 
    body { 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px; 
 
     background: #000; 
 
    } 
 
    body { 
 
     overflow: hidden; 
 
    } 
 
    .main-content { 
 
     background: url(http://lorempixel.com/400/300) no-repeat top center; 
 
     background-size: contain; 
 
     height: 100% !important; 
 
     width: 100% !important; 
 
    } 
 
    .eq-content-wrap { 
 
     position: absolute; 
 
     width: 500px !important; 
 
     top: 22%; 
 
     left: 40%; 
 
    } 
 
    .main-content:before { 
 
     content: " "; 
 
     height: calc(12.5%); 
 
     width: calc(5%); 
 
     border-radius: 100%; 
 
     background-color: red; 
 
     position: absolute; 
 
     top: calc(50%); 
 
     left: calc(50%); 
 
     margin-top: calc(1%); 
 
    }

<div class="container main-content"> 
 
    <!--the map background image is set here--> 
 
    <div class="row relative"> 
 
    <div class="eq-content-wrap"> 
 
     <div class="eq-content"> 
 
     <div class="marker"></div> 
 
     <!--the marker that is positioned absolute--> 
 
     </div> 
 
    </div> 
 
    </div>

的jsfiddle http://jsfiddle.net/o79rpawc/

來源

2015-07-10 01:31:09 guest271314

感謝您的回覆，這種方法仍然有標記移動 –

處理此背景圖像問題的最佳方法是什麼？

回答

相關問題