1

我不知道现在是晚了还是我只是愚蠢，但我无法弄清楚。

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

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

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

显然，将背景位置设置为“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。

感谢那些在评论中提供帮助的人。

4

1 回答 1

1

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

您可以在此处查看有关数学的解释

就您而言，简短的回答是：

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

这意味着：

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

演示

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

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 */
}
于 2013-06-09T08:28:42.633 回答