Question

我设法在bg中滚动了一个图像，但问题是，对于高度超过屏幕尺寸高度的页面，动画不会显示在页面底部（溢出部分）< / p>

这里是小提琴： jsfiddle demo

背景动画的CSS：

<form action="">
<input type="checkbox" name="day" id="1" value="Sunday" onclick="fillInput(this);">Sunday<br>
<input type="checkbox" name="day" id="2" value="Monday" onclick="fillInput(this);">Monday <br>
<input type="checkbox" name="day" id="3" value="Tuesday" onclick="fillInput(this);">Tuesday<br>
<input type="checkbox" name="day" id="4" value="Thursday" onclick="fillInput(this);">Thursday<br>
<input type="checkbox" name="day" id="5" value="Friday" onclick="fillInput(this);">Friday<br>

Selected Days: <input type="text" name="LastName" value=""><br>
<input type="button" value="Clear" onclick="Myfunction()">
</form>

<script>
function Myfunction(){
  document.getElementsByName("LastName")[0].value="";
}

function fillInput(element){
  if(element.checked) {
    document.getElementsByName("LastName")[0].value= document.getElementsByName("LastName")[0].value + element.value + " ";
  }
  else {
    document.getElementsByName("LastName")[0].value = document.getElementsByName("LastName")[0].value.replace(element.value + " ", "");
  }
}
</script>

正如您在上面的示例中所看到的，动画未应用于最后一行的页面底部。

如何解决这个问题？感谢

Answer 1

哦，我现在看到了问题。

将height:100vh;替换为min-height: 100vh; height:100%;

CSS背景图像滚动动画

1 个答案: