Javascript 如何根据元素设置准确的背景位置'；什么位置？

我试图实现的是：使用相同的图像，使用jQuery设置元素

背景位置

，使它们与最近的父元素

背景图像

重叠。我不知怎么地想，这个

$element.property（）.left

需要乘以接近

2

的值（仍然不明白为什么会这样），但我看不到其中的任何数学模式

如果有人能告诉我方程式的具体内容，那将是很大的帮助。我想象有

填充

和

边距

的元素和DOM树中涉及的所有元素，但是经过很多组合后，我仍然无法达到这一点

似乎获得理想效果的最佳方法就是设置

background:transparent，但事实并非如此；我需要它在元素的背景图像上进一步使用
filter
CSS属性

HTML中添加了内联样式用于测试；还有，我创造了


$.fn.filteredImg=函数（）{
变量$this=$（this）
$this.每个（功能（索引、卡片）{
var$卡=$（卡）；
var img=$card.data（“img”）；
变量$parent=$card.parentsUntil（“[data img=”“+img+””]）。last（）.parent（）；
var$effect=$card.children（“.filteredeffect”）；
var pos=$card.position（）；
$parent.css（{
背景图片：“url（“+img+”），
背景重复：“不重复”
});
$effect.css({
背景图片：“url（“+img+”），
背景位置：-2*数学中心（位置左侧）+“px”+-数学圆形（位置顶部）+“px”
});
})
}   
$（“.card filteredImg”）.filteredImg（）
.card-filtered img{
宽度：80%；
最小高度：500px；
左边距：77px；
利润上限：17像素；
位置：相对位置；
}
.卡过滤img>*{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.卡片过滤图像.过滤效果{
z指数：99；
}
.卡片过滤的img.卡片内容{
背景：rgba（34,34,34,0.35）；
z指数：100；
}
以下是基于
偏移量而不是
位置的解决方案（我简化了代码）：


$.fn.filteredImg=函数（）{
var$this=$（this）；
$this.每个（功能（索引、卡片）{
var$卡=$（卡）；
var$effect=$card.children（“.filteredeffect”）；
var$parent=$（card.parents（“.parent”）.first（）；
var img=$parent.data（“img”）；
var cardPos=$card.offset（）；
$parent.css（{
背景图片：“url（“+img+”），
背景重复：“不重复”
});
$effect.css({
背景图片：“url（“+img+”），
背景位置：-cardPos.left+“px”+-cardPos.top+“px”
});
})
}   
$（“.card filteredImg”）.filteredImg（）
.card-filtered img{
宽度：80%；
最小高度：500px；
左边距：77px；
利润上限：17像素；
位置：相对位置；
}
.卡过滤img>*{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.卡片过滤图像.过滤效果{
z指数：99；
}
.卡片过滤的img.卡片内容{
背景：rgba（34,34,34,0.35）；
z指数：100；
}
由于/如果使用完整视口，您可以使用视口单位来定位和调整内部卡的大小，并将脚本放在一起

这也可以在调整大小时进行缩放，并将提高性能，因为您不需要脚本来监视调整大小和重画

注意，对于这个演示，我在没有引导的情况下运行了它，因为我不想为它的媒体查询等添加补偿



html，正文{
保证金：0；
溢出x：隐藏；
}
.外部{
高度：1080px；
宽度：100vw；
}
.卡片压克力{
顶部：20px；
宽度：80vw；
左边距：10vw；
最小高度：500px；
位置：相对位置；
背景位置：左-10vw top-20px；
}
.卡片丙烯酸+.卡片丙烯酸{
顶部：40px；
背景位置：左-10vw top-540px；
}
.卡片压克力>*{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
.卡片丙烯酸.丙烯酸效果{
z指数：99；
}
.卡片.卡片内容{
背景：rgba（34,34,34,0.35）；
z指数：100；
}

为什么要使用图像？你为什么不使用透明背景和不透明背景呢？因为，例如，你不能使用透明背景和不透明背景的滤镜：模糊（5px）
。你也可以尝试类似的方法。我在计算接近月球半径的东西。。非常感谢你。