为响应式背景图像创建提示

Question

一开始，这是一个非常通用的问题，所以欢迎所有回复。

所以，我有一些设计，整页背景和一些文本，这将是html文本。并且使用白线连接此文本，此白线指向红点。我认为，红点将被定位为绝对，但随后会出现一些问题：

这是响应式视图，因此在调整大小时，背景图像会改变宽度，因此红点应该跟随此指向区域（这可能吗？）

另外，我正在寻找一种方法将这个红点与html exmplanation box连接起来。

我已经搜索过，但找不到任何适合我需要的东西。

另外，我不希望任何人会为我写完整的代码 - 但我需要一些线索，如何开始这个......

Answer 1

您可以将其设计为大屏幕（例如1440像素宽），然后根据您需要的百分比进行缩放。您可以为此目的创建一个js函数：

（请注意，这只是一个例子）

function resizeMe() {
  var initialHeight = 1440;

  var displayHeight = $(window).height();
  var percentage = displayHeight / initialHeight;
  $(".your-element").css("transform", "scale("+percentage+")");
}
$(function() {
  $(window).bind('resize', function() {
    resizeMe();
  }).trigger('resize');
});

.your-element {
  background: url(http://dummyimage.com/1440x768/000/fff&text=Big+Image) top left no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
body,html { height: 100%;margin:0; }
.text {
  position: absolute;
  top: 230px;
  right: 20px;
  height: 100px;
  background: white;
  border:1px solid black;
  color: black;
  padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="your-element">
  <div class="text">Lorem ipsum dolor sit amet</div>
</div>