javascript - 相对于背景大小为 : cover 的特定图像点的元素

Question

我有如下场景:

.cover-image {
background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover; 
  height : 100vh;
  width : 100vw;
  position : absolute;
  z-index : 1;
  left : 0;
}
body{margin : 0; padding : 0; }
.data{
position:absolute;
 position: absolute;
    z-index: 10;
    height: 30px;
    width: 40px;
    top: 61vh;
    left: 11vw;
    background: red;  
}
.container {
position : absolute; height : 100vh; width : 100vw; 
}

<div class="container">
<div class='cover-image'></div>
<div class='data'>chair</div>
</div>

这里数据框应该总是在椅子的左上方，如果我们调整窗口的大小。

我们怎样才能做到这一点？

Answer 1

有更好的方法可以实现这一点，但采用您现有的代码并使其正常工作，以下似乎是适合您的场景的解决方案。请注意，您必须尝试使用​​正确的尺寸，这只是个主意。 (您可以在此处看到 DEMO)。

HTML

<div class="container">
   <div class="cover-image">
   </div>

   <div class="data">Chair</div>
</div>

CSS

body{
   margin: 0 auto;
}
.container{
   width: 1000px;
}

.cover-image { 
   background : no-repeat url('https://thumb9.shutterstock.com/display_pic_with_logo/536575/164027042/stock-photo-simple-and-stylish-office-environment-164027042.jpg') center center / cover;  
   float: left;
   height: 942px;
   width: 1920px;  
}

.data { 
   margin-right: 20%;
   background-color: red;
   float: right;
   height: 30px;
   width: 40px;
   margin-top:580px;
   margin-left: 170px;
   position: absolute;
}