将背景位置垂直移动一定值？

Question

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

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

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

有没有办法用纯CSS或JS将背景图像的位置垂直移动相对于其原始位置的固定值（例如10px）来得到类似的东西：

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

Answer 1

试试这个calc

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

Answer 2

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

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

小心，根据caniuse.com，IE9可能会遇到问题：

  

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

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

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

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

Answer 3

这应该运作良好，你能详细说明 - 你想要实现的目标是什么？

 background-position: center -10px;

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