對象跟隨響應背景圖像

我正在試圖製作一個橫幅圖像，其中將包括「興趣點」，您可以將鼠標懸停在上面以查看更多信息。這些點需要相對於背景圖像具有固定的位置。如果背景圖像具有靜態大小，這是很容易的，但這需要對背景大小：封面的影響作出響應。對象跟隨響應背景圖像

我已經嘗試將它們與像素和百分比進行定位，但由於background-size：cover會改變圖像的with和高度，所以這變得很困難。

任何人有任何解決方案？

我會inlude一點點的jsfiddle所以你可以看到我的意思：

body{ 
 
     margin:auto; 
 
     text-align: centeR; 
 
    } 
 
    .background{ 
 
     
 
    } 
 
    .bg{ 
 
     background-size:cover; 
 
     height:500px; 
 
     position: relative; 
 
     overflow: hidden; 
 
    } 
 
    .poi{ 
 
     height:50px; 
 
     width:50px; 
 
     position:absolute; 
 
    } 
 
    .poi:after{ 
 
     font-family: FontAwesome; 
 
     content: "\f067"; 
 
     color:green; 
 
     font-size: 30px; 
 
}

<!doctype html> 
 
<html lang="no"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
 
    <style> 
 
    
 
    </style> 
 
</head> 
 

 
<body> 
 

 
\t <header id="header" class="header"> 
 
    <h1>Header</h1> 
 
</header> 
 

 

 
<div class="background"> 
 
    <div class="bg" style="background-image: url('http://i.imgur.com/HmjQ2tj.jpg');"> 
 
     <div class="poi-container"> 
 
      <div class="poi" style="left:33%;top:33%;"></div> 
 
      <div class="poi" style="left:564px;top:497px;"></div> 
 
      <div class="poi" style="left:1132px;top:36px;"></div> 
 
      <div class="poi" style="left:1332px;top:336px;"></div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 

 
<section class="other"> 
 
    <h2>Some other content</h2> 
 
</section> 
 

 
</body> 
 

 
</html>

來源

2016-02-24 Henning Høgmoen Haugen

你可以試試媒體查詢的響應 – RRR

我發現，使用背景圖片不是理想但是，相反，使用頂部帶有針腳的內嵌圖像。

然後使圖像以通常的方式響應，並且可以絕對地相對於圖像包裝來定位圖釘/標記。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.map { 
 
    margin: 10px; 
 
    position: relative; 
 
} 
 
.map img { 
 
    max-width: 100%; 
 
    display: block; 
 
} 
 
.box { 
 
    width: 5%; 
 
    height: 5%; 
 
    background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg); 
 
    background-position: top center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    position: absolute; 
 
} 
 
#pin-1 { 
 
    top: 25%; 
 
    left: 36%; 
 
} 
 
.box:hover > .pin-text { 
 
    display: block; 
 
} 
 
.pin-text { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 75%; 
 
    white-space: nowrap; 
 
    display: none; 
 
} 
 
.pin-text h3 { 
 
    color: white; 
 
    text-shadow: 1px 1px 1px #000; 
 
}

<div class="map"> 
 
    <img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" /> 
 
    <div id="pin-1" class="box"> 
 
    <div class="pin-text"> 
 
     <h3>My House</h3> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-24 10:54:41

哎呀，謝謝！這真的做到了！ –

對象跟隨響應背景圖像

回答

相關問題