使用百分比与背景位置

Question

我有一张如下图所示的图片，我想为不同的百分比值设置图片背景位置 (0%, 25%, 50%, ...)。

---> 例如我想用 myfunction(50%) 调用一个函数并且图像背景应该向左移动大约 50%.

---

请看我的代码：

function call(value) {
  document.getElementById("img").style.backgroundPositionX = -value + "px"
}
   

#img {
       position: fixed;
       left: 0%;
       width: 100%;
       height: 20%;
       top: 0%;
       background:url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
            background-size:cover;
    }

<div id="img"><br></div>

<br><br><br>
<input type="text" oninput="call(this.value)"/>

我的想法是将 设置为百分比值（在本例中为“50%”）

elem.backgroundPositionX = "50%"

...但似乎不是这样工作的！

---

我不知道如何解决这个问题。我不想使用 px 值。 我想按百分比设置位置。

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

如果您想考虑相对于容器宽度的百分比 （或初始图像的宽度或任何其他值），您可以进行一些计算以将百分比值转换为像素.

你可以试试这个：

function call(value) {
  var w = document.getElementById("img").offsetWidth;
  var v = (value * w)/100 
  document.getElementById("img").style.backgroundPositionX = -v + "px";
}

#img {
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
}

input {
  margin-top:50px;
}

<div id="img"></div>
<input type="text" oninput="call(this.value)" >

附带说明一下，带有背景位置的百分比值与像素值不同。 0%表示元素放在左边（图片的左边缘放在容器的左边缘），100%表示元素在右边（图像的右边缘放在容器的右边缘）。由于您使用的是 cover 背景大小，您应该 increase 值以便将图像向左移动，因此您必须考虑正值如果你想使用百分比。

查看下方 px 与 % 的行为：

#img {
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
  
  animation:anime 5s alternate infinite linear;
}
#img1 {
  margin-top:20px;
  width: 400px;
  height: 50px;
  background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
  background-size: cover;
  
  animation:anime 5s alternate infinite linear;
}


@keyframes anime {
  from {
    background-position-x:0%
  }
  to {
    background-position-x:100%
  }

}
@keyframes anime1 {
  from {
    background-position-x:0px
  }
  to {
    background-position-x:-400px
  }

}

<div id="img"></div>
<div id="img1"></div>

相关问题以获取更多详细信息：Using percentage values with background-position on a linear gradient