css - 将div定位在具有相对位置的背景图像之上

Question

我有一个带有背景图片的全 Angular div。背景图片中有人物，我想在您将鼠标悬停在每个人物上方时显示工具提示。

我认为您无法使用 % 宽度编写图像映射，因此我尝试使用 DIV 来实现。像这样:

<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>

和 Css 是这样的:

.homepageimage{
 width:100%;
  max-width:2000px;
  height:750px;
  margin:auto;
  margin-top:-50px;
 background: url({{ 'homepage_test2.jpg' | asset_url }});
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  clear:both;
  overflow:hidden;
 }

 .artistmap{
   height:100%;
   border:2px solid red;
   float:left;
 }

 .artistmap:hover{
  content:attr(title); 
 }

 #davidmap{
  width:10%; 
 }

 #ceceliamap{
   width:15%;
 }

 #erinmap{
  width:5%; 
 }

 #aimap{
    width:5%; 
 }     

 #tommap{
  width:10%; 
 }

不幸的是，根据屏幕的大小，div 不会与人对齐...解决此问题的最佳方法是什么？

我将上面的代码发布到这里的 cssdesk:

http://cssdesk.com/vmZSD

谢谢!

Answer 1

这是一个FIDDLE这可能对你有帮助。

CSS

.americangothic {
    float: left;
    width: 315px;
    height: 384px;
    background: url(http://www.artic.edu/aic/collections/citi/images/standard/WebLarge/WebImg_000256/190741_3056034.jpg );
    background-size: 315px 384px;
    position: relative;
}
.changemediv1 {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: red;
    border: 3px solid gray;
}
.changemediv2 {
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    background-color: blue;
    border: 3px solid gray;
}

.face1:hover ~ .changemediv1  {
    background-color: green;
}
.face2:hover ~ .changemediv2  {
    background-color: green;
}
.face1 {
    width: 80px;
    height: 110px;
    border: 0px solid red;
    position: absolute;
    top: 70px;
    left: 35px;
}
.face2 {
    width: 80px;
    height: 130px;
    border: 0px solid red;
    position: absolute;
    top: 30px;
    left: 180px;
}

img {
    width: 315px;
    height: 384px;
}

请记住所有的 div 都需要在同一个容器中。