Question

我试图制作一个横幅图片，其中包括＆＃34;兴趣点＆＃34;你可以将鼠标悬停在上面看更多。这些点需要相对于背景图像具有固定位置。如果背景图像具有静态大小，这很容易，但这需要响应背景大小的效果：封面。

我尝试用像素和百分比来定位它们，但由于背景大小：封面会改变图像的高度和高度，因此这很难。

有人对此有任何解决方案吗？

我会包括一个小小的Jsfiddle所以你可以看到我的意思：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

对象遵循响应式背景图像

1 个答案: