对象遵循响应式背景图像答案

【问题标题】：Objects follow responsive background-image对象遵循响应式背景图像
【发布时间】：2016-02-24 10:46:47
【问题描述】：

我正在尝试制作包含“兴趣点”的横幅图片，您可以将鼠标悬停在上面查看更多内容。这些点需要相对于背景图像具有固定的位置。如果 background-image 具有静态大小，这很容易，但这需要响应 background-size:cover 的效果。

我试过用像素和百分比来定位它们，但是由于 background-size:cover 改变了图像的宽度和高度，这变得很困难。

谁有解决这个问题的办法？

我将包含一个小 Jsfiddle，以便您了解我的意思：

https://jsfiddle.net/jynf21kw/1/

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>

	<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>

【问题讨论】：

您可以尝试媒体查询以提高响应能力

标签： html css

【解决方案1】：

我发现不使用背景图像是理想的，而是使用带有位于顶部的针脚的内联图像。

然后以通常的方式使图像具有响应性，并且可以相对于图像包装器绝对定位图钉/标记。

* {
  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>

【讨论】：