demo

Question

我不知道这是不是很晚，或者我只是愚蠢，但我无法理解这一点。

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

如果我可以使用像素，那么将background-position设置为[width-of-element]px 0就足够了，但是因为我希望元素的最终位置为50% 0，所以我不能以像素值开头。（我正在使用jQuery背景位置插件btw http://keith-wood.name/backgroundPos.html）。

所以，我的问题是，知道元素的宽度和背景图像的宽度 - 我如何计算定位图像所需的％：年龄在元素的边缘之外？

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

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

Answer 1

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

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

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

背景大小比div大或小f为f。然后你的百分比是100 /（1 - f）。

这意味着：

背景大小与div相同。你运气不好，这是不可能的。
背景更大。假设div = 100 background = 400，则f = 4，公式给出-33％。（演示中的第一个例子）
背景更窄。假设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 */
}

使用百分比将背景图像放在元素外部

1 个答案:

demo