主页 / 问题 / 832564
Accepted
Telion
Asked:2020-05-24 04:18:36 +0000 UTC2020-05-24 04:18:36 +0000 UTC

奇怪的背景位置行为

  • 772

当悬停在一个块上时，我想制作一个简单的动画。我想通过背景的移动来做所有的事情，而不是更进一步。通常，如果 viewport 有足够的高度background-position，它可以按我的需要工作，因此它将图像移动到块外 130% 的位置，但是对于较小的块，图像会向上而不是向下。我不明白为什么。我创建了一个交互式示例：

https://jsfiddle.net/Telion/g3h372mx/1/

setInterval(() => {
	$("#d").toggleClass("active");
}, 2000);
body {
  height: 20px;
}
body>div {
  background-image: url(https://cdn130.picsart.com/254265053013212.png);
  background-repeat: no-repeat;
  background-size: 350px 350px;
  background-position: -100px 200%;
  
  width: 300px;
  height: 400px;
  background-color: #000;
  transition: 0.5s;
}

.active {
  height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d"></div>

你能告诉我为什么会发生这种情况，以及是否可以在不改变解决问题的方法的情况下解决它？

编辑： 可能值得添加一个原因。将鼠标悬停在块上将执行以下操作：https ://jsfiddle.net/Telion/g3h372mx/3/

html

2 个回答

  1. Best Answer

    所以？

    body {
  height: 20px;
}
body>div {
  background-image: url(https://cdn130.picsart.com/254265053013212.png);
  background-repeat: no-repeat;
  background-size: 350px 350px;
  background-position: -100px calc(100% + 100px);
  
  width: 300px;
  height: 250px;
  background-color: #000;
  transition: 0.5s;
}

body>div:hover {
  width: 500px;
  background-size: 370px 370px;
  background-position: -80px calc(100% + 30px);
}
    <div id="d"></div>

    • 1

  2. 很可能问题出background-position在第二个示例中的错误，我放background-position: -80px 290%;了它，图片开始按原样移到底部。为动画选择正确的位置。

    • 0

相关问题