将背景位置垂直移动某个值？答案

【问题标题】：Shift background-position vertically by a certain value?将背景位置垂直移动某个值？
【发布时间】：2015-10-03 15:11:33
【问题描述】：

我有一个容器，它的背景图片居中：

<div class="foo"></div>

.foo {
   background: white url(../image.jpg) no-repeat scroll center center / cover;
}

有没有办法通过纯 CSS 或 JS 将背景图像的位置相对于其原始位置垂直移动一个固定值（例如 10px）以获得类似：

background-position: center (center - 10px);

【问题讨论】：

【解决方案1】：

试试这个calc

.foo {
   background-position: 50% calc(50% - 10px);
}

【讨论】：

【解决方案2】：

您可以尝试将calc CSS 函数与50% 值结合使用，这意味着center：

background-position: center calc(50% - 10px);

小心，根据caniuse.com IE9 可能有问题：

IE9 中的部分支持是指浏览器在用作背景位置值。

另一种方法可能是使用background-origin 属性以及将所需边距设置为框底部（如果要向上移动图像）或顶部（如果要向下移动图像）的填充：

background-origin: content-box;
padding-bottom: 10px;
background-position: center center;

这看起来更丑，但至少不应该有 IE9 崩溃的问题。

【讨论】：

【解决方案3】：

这应该很好用，你能详细说明一下 - 你想要实现什么？

 background-position: center -10px;

这会将背景图像垂直向上移动 10 像素

【讨论】：