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

问题描述：

我正在尝试构建一个混合应用程序，并且需要获取特定背景区域的大小。使用background-size计算背景上特定部分的大小：cover;

背景具有那些性质： background-size: 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，但不知道如何将它们调整到正确的比例。

任何人都可以帮忙吗？

只是为了澄清;该图像上是否有红色正方形，并且您想要在红色正方形上放置一个div？或者，这个红色正方形只是表示它应该如何看待（即实际图像上没有红色正方形）？ –

红色正方形在图像上，我必须将div完全放在同一个地方，以便用div中的某个东西（例如：照片）代替红色恐慌，但div必须与红色方块的大小相同（回应地说） – Djagu

答

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

的第一件事情就是要知道背景的宽度和高度

二是要知道我们想要的背景（用于为例红色恐慌）的元素的大小

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

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

相关推荐