【发布时间】：2014-02-02 17:32:23
【问题描述】：
我正在尝试使用 jquery 编写一个脚本，该脚本替换 CSS calc() 函数以实现浏览器兼容性。我要改写的是background-position: center calc(100% - 80px);
我的尝试有点像这样：
$(window).resize(function () {
$('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});
但是我从第一个值还是第二个值中减去什么？我需要帮助，想不出任何可能的解决方案：/
编辑
为了更清楚，我试图让我的背景图像定位在“中心底部”，y 轴偏移为 80 像素，在这种情况下，“100%”等于“底部”。
更多编辑
所以最后，我发现了。
为此，我们需要在页面某处有一个 img 元素，其中 display:none 包含原始宽度的背景图像。让我们给它一个 ID #referrer。我们也可以用jquery创建，把img的src设置为元素的背景图，但是比较复杂，我们'd 需要从 DOM 的 CSS 中获取背景图片 url，所以我们只需手动创建它。
像这样：
<img src="our-img.png" style="display:none;" id="referrer" />
然后我们可以在需要的时候调用这个函数（在我的例子中是调整窗口大小）
function larg() {
foo = $('#element').height() - $('#referrer').height();
$('#element').css('background-position-y', foo + 'px');
};
这就是我们如何使图像的底部与元素的底部对齐。 现在，我们需要做的就是将偏移像素的数值添加到 foo。
我们可以修改我们的函数来接受一个参数，所以我们不必每次改变我们的偏移量时都修改它。
function larg(bar) {
foo = $('#element').height() - $('#referrer').height() + bar;
$('#element').css('background-position-y', foo + 'px');
};
然后我们基本上可以从任何地方调用它，在this fiddle，它在调整 div 大小后通过按钮 onClick 调用：
<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>
请注意，它不是通用的，仅在背景图像为原始大小时才有效。
最终编辑
Don't ask me why didn't I know it.
background-position: center bottom 80px;
但是我写了一段很酷的代码，对吧？ 这行 CSS 在 IE8 中不起作用，因此代码很有用，虽然很少。
【问题讨论】：
标签： javascript jquery css fallback