Question

我正在尝试用 jquery 编写一个脚本，用 CSS calc（）函数替代浏览器兼容性。我想重写的是background-position: center calc(100% - 80px);

我的尝试有点像这样：

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

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

修改

为了更清楚，我试图让我的背景图像位于“中心底部”，偏移80px，在这种情况下，“100％”等于“底部”。

ONE MORE EDIT

最后，我发现了。

为了实现这一点，我们需要在页面的某处使用 img 元素 display：none ，其中包含原始宽度的背景图片。我们给它一个ID #referrer 。我们也可以用jquery创建它并将 img 的 src 设置为元素的背景图像，但它相当复杂，我们需要从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中，在按照 onClick 按钮调用之后调整div：

<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中不起作用，因此代码很有用，但最低限度。

Answer 1

如果你想确定参数，你可以只使用background-position-y（不是所有的浏览器）

（您甚至可以直接在图片中添加80px的transperent边距，并始终在css中使用background-position: center bottom;

最终我用不寻常的解决方案<{3}}

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

使用jquery从底部偏移背景

1 个答案: