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

Question

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

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

这是一张图片来阐明我想做什么: Background example with a red rectangle on it

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

感谢这个主题，我知道如何让元素在背景上跟随正确的绝对位置 Position element over background image ，而不是如何将它们调整到合适的比例。

有人能帮忙吗？

Answer 1

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

• 首先要知道背景宽高

• 第二个是知道我们想要在背景上的元素的大小(例如红色 panic )

  // 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);