Question

我希望在课程变更时为我的标题添加背景图像，并在后台平滑地制作动画。因为元素（在我的情况下 - 不在下面的例子中）具有可变高度，我想使用百分比来偏移元素外部的背景位置，以便它可以在该类更改后平滑地滚动。但是，下面的代码让我有点困惑：

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

上面是一个永久循环，它将激活测试类。单击该框将把设置的CSS值从百分比更改为像素并返回，说明问题，因为动画在应用像素时开始备份，但是一旦再次关闭动画就会消失。

为什么将background-position设置为负百分比值在此处不起作用[更正：负和正百分比值都不起作用]，但将其设置为像素值工作？根据文档（MDN），background-position可以有负%值，并且它以像素为单位，那么这里发生了什么？

我正在使用Safari 8.0.2并在Chrome 41.0.2272.118（64位），Mac

上对此进行了测试

Answer 1

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

百分比是根据包含盒子的宽度/高度计算的吗？答案是不”。

根据W3 documentation：

百分比是指背景定位区域的大小减去背景图像的大小;见文字

来自MDN link that you shared：

百分比是指背景定位区域的大小减去背景图像的大小; size是指水平偏移的宽度和垂直偏移的高度

这是什么意思？

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

计算的

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

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

200 - 200 = 0

结果是0，无论你乘以它的数字/百分比，都会得到0。

背景位置负百分比值

1 个答案: