javascript - 使用 background-size:cover 计算背景集上特定部分的大小；

Question

我正在尝试构建一个混合应用程序，我需要获取背景特定部分的大小。

• 背景具有这些属性： background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed;
• 我想在该背景上放置一个 div 并将 div 的大小设置为背景精确部分的大小。

这是一张图片来说明我想做的事情： 背景示例，上面有一个红色矩形

上面背景图像上的红色矩形是我想在响应式屏幕上计算大小的图像部分的示例。

我知道如何使元素在背景上遵循正确的绝对位置，这要归功于这个主题Position element over background image，但不知道如何将它们调整到正确的比例。

任何人都可以帮忙吗？

Answer 1

我终于设法解决了这个问题，这并不像我想象的那么复杂。

• 首先要知道背景的宽高

• 第二个是知道我们想要的元素在背景上的大小（例如红色恐慌）

  // In css : background-size: 100% 100%;
  var background = {width: 1200, height: 900 };
  var redScare = {selector: '.redScare', width: 400, height: 342, x: 50, y: 60};
  
  var xFactor = $( window ).width() / background.width;
  var yFactor = $( window ).height() / background.height;
  
  
  // New width proportionally to the window size
  redScare.width = redScare.width * xFactor;
  // New height proportionally to the window size
  redScare.height = redScare.height * yFactor; 
  
  //Setting the new dimensions
  
  $(redScare.selector).css('width', redScare.width);
  $(redScare.selector).css('height', redScare.height);