使用百分比将背景图像定位在元素之外

Question

我不知道是不是很晚了，还是我只是愚蠢，但我想不通。

我想要做的是使用 %. 将背景图片定位在它所属的元素之外。我想做的原因是，我以后可以将背景位置从这个 % 设置为 50%，让它“滑入”。

如果我可以使用像素，将background-position 设置为[width-of-element]px 0 很容易，但由于我希望元素的最终位置为50% 0，所以我不能从像素值开始。 （我正在使用 jQuery 背景位置插件 btw http://keith-wood.name/backgroundPos.html）。

所以，我的问题是，知道元素的宽度和背景图像的宽度 - 我如何计算需要哪个 %:age 来定位图像只是 em> 在元素的边缘之外？

显然将背景位置设置为“0 0”使其呈现在左上角，“50% 0”使其居中，“100% 0”使其从右边缘定位。如果我超过 100%，它开始从右边缘移开，并且根据图像的宽度（我猜是元素），需要大约 200 及以上的任何值才能将背景图像完全推到边缘之外元素。

如果我反过来，图像从 0 向下移动到右侧，隐藏它所需的百分比再次变化，但 不 与推动所需的正百分比相同它离开了另一边。

再一次，也许我只是累了，但我被困在这里了。

http://jsfiddle.net/cTeEA/

编辑：我注意到的另一个奇怪的事情是，如果图像比包含元素小，将其 background-position-x 增加到 100% 以上并不会使其远离右侧它使它向右移动。在这个更新的小提琴上调整 101% 并与旧的小提琴进行比较，看看我的意思：http://jsfiddle.net/cTeEA/1/

编辑：好的百分比似乎是不可能的，或者至少比简单地使用像素难十倍。这是我解决它的方法（或多或少）：

var dir         = 'left'; // || 'right' (where to slide in the image from)
var winWidth    = $(document).width();
var imgWidth    = $('img[src="src-of-already-added-and-loaded-img.png"]').width();
var posOutside  = dir == 'right' ? '-' + imgWidth + 'px' : winWidth + 'px';
var posCenter   = (imgWidth > winWidth) ? -((imgWidth - winWidth) / 2) : ((winWidth - imgWidth) / 2);

然后我只是将背景位置从 posOutside 设置为 posCenter。

也感谢那些在 cmets 中提供帮助的人。

Answer 1

带有百分比值的背景位置并不容易。

您可以看到有关数学的解释here

在你的情况下，简短的回答是：

背景大小比 div 大或小 f 倍。那么你的百分比是 100 / (1 - f)。

这意味着：

1. 背景大小与 div 相同。你运气不好，这是不可能的。
2. 背景更大。假设 div=100 背景=400，然后 f = 4，公式给出 -33%。 （演示中的第一个示例）
3. 背景较窄。假设 div=400 background=100, f=0.25，公式给出 133%（演示中的第二个示例）

demo

请注意，在演示中，百分比有点偏移，以表明背景确实存在

css：

div.foo {
    width: 100px;
    background-size: 400px 100px;
    background: red url(http://placekitten.com/400/100) no-repeat 50% 0;
    height: 100px;
    background-position: -32% 0; /* Disappear to the left */
}

div.foo2 {
    width: 400px;
    background-size: 100px 100px;
    background: red url(http://placekitten.com/100/100) no-repeat 50% 0;
    height: 100px;
    background-position: 132% 0; /* Disappear to the left */
}