背景位置值操纵

Question

我有一个项目，我正在构建一个XML文件中描述的幻灯片，但它需要允许基于偏移值对幻灯片进行图像定位。

现在我有Y偏移下调，现在唯一的问题是我需要能够在X中偏移某个数量的东西，但仍保持％'年龄值行为。

所以基本上反正将背景位置的x开始于50％然后将其偏移一个像素量并保持％'年龄的相对行为（50％+ offsetInPixels）？

Answer 1

您可以这样做，但并未得到广泛支持。

background-position: -moz-calc(50% - 20px) 0;
background-position: calc(50% - 20px) 0;

目前（2011年5月）这仅适用于Firefox 4和IE9。

有关兼容性，请参阅http://caniuse.com/#calc。

Answer 2

你不能用纯CSS做到这一点（此时请参阅Rich Bradshaw's answer）。

你可以在javascript中用以下内容完成：

var totalWidth = 960;
var xOffset = 10;
el.style.backgroundPosition = ((totalWidth/2) + xOffset) +"px 50px";

Answer 3

我认为你最好的选择是将背景图像作为图像隐藏在内容中......这有点像黑客，但它works另外，考虑（正如Jesse所说）添加{{1}如果你不想让bg倾泻而出。

overflow:hidden

<div id="main" >
<div id="bg"><img src="http://www.google.com/images/logos/ps_logo2.png"/>  </div   </div>

演示：http://jsfiddle.net/mhy3r/10/

Answer 4

我找到了另一种使用CSS3的解决方案。但是，它要求容器具有固定的尺寸。

HTML：

<div id="example">Example</div>

CSS：

#example {
  width: 200px;
  height: 200px;
  padding-left: 100px;
  background-origin: content-box;
  background-position: 10px 10%;
}

我猜这是一个黑客攻击。它不是从边框的左上角开始背景位置，而是使用内容框而不是50％（即100px）填充。就像我说的那样，你需要知道50％填充的确切值，因为写padding-left: 50%;将被解释为父元素的50％。

如果您需要此容器中的完整空间，可以使用<div>

将另一个margin-left: -100px;放入其中