Question

我有一个你可以在下面看到的图像，我想为不同的百分比值(0%, 25%, 50%, ...)设置图像背景位置。

---＆GT; 例如，我想调用myfunction(50%)的函数，图像背景应向左移动约50％。

请查看我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我的想法是设置百分比值（在这种情况下＆＃34; 50％＆＃34;）

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％表示元素位于右侧（右边缘）图像的位置放在容器的右边缘。由于您使用背景大小为封面，因此您应该增加值以将图像移到左侧，因此如果您想使用百分比，则必须考虑正值。

检查以下内容，了解px vs％的行为：

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

使用背景位置的百分比

1 个答案: