背景位置负百分比值

Question

我想在 class 更改时为我的页眉提供背景图像，并在背景中流畅地设置动画。因为元素（在我的例子中——不是在下面的例子中）有一个可变的高度，我想使用百分比来抵消元素外的背景位置，这样一旦 class 改变它就可以平滑地滚动。然而，下面的代码让我有点难过：

var test = document.getElementById("test");
var span = document.getElementById("change");

setInterval(function(){
  test.className = test.className.indexOf("test") >= 0
    ? test.className.replace("test", "").replace("  ", " ").trim()
    : (test.className + " test").trim();
},3000);

test.addEventListener("click", function(event){
  var testing = test.className.indexOf("in-pixels") >= 0;
  span.innerHTML = testing ? "pixels" : "percentages";
  test.className = testing
    ? test.className.replace("in-pixels", "").replace("  ", " ").trim()
    : (test.className + " in-pixels").trim();
});

#test {
    border: 1px solid #000;
    cursor: pointer;
 width: 200px;
 height: 200px;
 background-image: url(http://placehold.it/200x200);
 background-size: auto 100%;
 background-repeat: repeat-x;
 background-position: 0% -100%;
 -webkit-transition: background-position 500ms;
    -moz-transition: background-position 500ms;
  -ms-transition: background-position 500ms;
   transition: background-position 500ms;
}
#test.test {
 background-position: 0% 0%;
}
#test.in-pixels {
 background-position: 0% -200px;
}
#test.in-pixels.test {
 background-position: 0% 0;
}

<div id="test"></div>
<p>Click above to change to <span id="change">pixels</span></p>

以上是将激活测试的永恒循环class。单击该框会将设置的 CSS 值从百分比更改为像素，然后再更改回来，说明动画在应用像素时重新开始，但一旦你再次取消它就会消失。

为什么将 background-position 设置为负百分比值在这里不起作用 [更正：负和正百分比值都不起作用]，而是将其设置为像素值有效吗？根据文档 (MDN)，background-position 可以有负 % 值，并且它以像素为单位工作，所以这里发生了什么？

我使用的是 Safari 8.0.2，还在 Chrome 41.0.2272.118（64 位）、Mac[=17= 上进行了测试]

Answer 1

问题是百分比值不是我们（或者至少我）认为的那样。或者至少它不是使用假设值计算的。

百分比是根据包含框的width/height算出来的吗？答案是"No"。

根据 W3 documentation:

Percentages refer to size of background positioning area minus size of background image; see text

并且来自 MDN link that you shared：

Percentages refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets

这是什么意思？

背景位置百分比是相对于结果数计算的：

box size - image size = [number used for the percentage calculations]

在您的特定情况下，背景图像为 200 像素 x 200 像素，并且框具有相同的大小。然后，百分比不是指方框的200像素，而是指：

200 - 200 = 0

因为结果是0，所以number/percentage乘以什么结果都是0。

背景位置负百分比值

Background-position negative percentage values

css

css-transitions

percentage

background-position