Javascript 使用jquery从底部的背景偏移量

我正在尝试用jquery编写一个脚本，它用CSScalc（）函数替代浏览器兼容性。我想重写的是背景位置：中心计算（100%-80px）

我的尝试是这样的：

$(window).resize(function () {
    $('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});

<img src="our-img.png" style="display:none;" id="referrer" />

<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>

但是我要从第一个值或第二个值中减去什么呢？我需要帮助，但想不出任何可能的解决方案：/

编辑

为了让它更清楚，我试图让我的背景图像定位为“中心-底部”，y轴偏移量为80px，“100%”在本例中等于“底部”

再编辑一次

最后，我发现了

为此，我们需要在页面上的某个位置使用display:none的img元素，该元素包含原始宽度的背景图像。让我们给它一个ID#referer。我们也可以使用jquery创建它，并将img的src设置为元素的背景图像，但这相当复杂，我们需要从DOM的CSS获取背景图像url，所以我们只需手动创建它

像这样：

$(window).resize(function () {
    $('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});

<img src="our-img.png" style="display:none;" id="referrer" />

<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>

这就是我们如何使图像的底部与元素的底部对齐。 现在，我们需要做的就是将偏移像素的数值添加到foo

我们可以修改我们的函数来接受一个参数，所以我们不必每次更改偏移量时都修改它

function larg(bar) {
    foo = $('#element').height() - $('#referrer').height() + bar;
    $('#element').css('background-position-y', foo + 'px');
};

然后我们基本上可以从任何地方调用它，在调整div大小后，通过按钮onClick调用它，如下所示：

$(window).resize(function () {
    $('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});

<img src="our-img.png" style="display:none;" id="referrer" />

<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>

但我写了一段相当酷的代码，对吗？

---

这一行CSS在IE8中不起作用，因此代码很有用，尽管只是最低限度的使用。

如果您想确定参数，您只能使用（不是所有浏览器）

（您甚至可以简单地将80px透明边距直接添加到图片中，并始终在css中使用

背景位置：中底；

）

最后我用了一种不同寻常的解决方案

$('#slide').css('background-position', 'center bottom 80px')

---

我不完全确定，但它不是每次调整窗口大小时都会将背景向上移动80像素（如果设置为窗口大小调整功能），最终导致背景从屏幕上滑出吗我认为这只会产生一个错误，但那只是我？所以你想说我只能使用100%-80px？那是。。。哦，出乎意料，不。尝试排除CSS规则并将高度设置为100%。它所做的是，它获取不带百分号的百分比并减去80，然后添加px后缀，得到20px background-position-y。是的。但是删除CSS规则。代码不起作用，只是规则保持不变。