向下滚动页面并添加新内容时背景图像不覆盖
Posted
技术标签:
【中文标题】向下滚动页面并添加新内容时背景图像不覆盖【英文标题】：Background image doesn't cover when scrolling down page and new content is added 【发布时间】：2022-01-17 05:51:13 【问题描述】：我正在创建一个简单的待办事项列表，允许用户添加和删除项目。一切都完全按照我的意愿工作......除了......当用户添加足够的项目以导致页面开始滚动时，我在两个主要列上的背景图像不再出现。我虽然背景图像重复可以工作，但它没有。
HTML ---------------------------------------- --------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS ---------------------------------------- ---------------------------------------
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength ()
return input.value.length;
// function to create new task list item and corresponding delete button
function newTaskList()
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function()
deleteButton.classList.add('grow')
)
deleteButton.addEventListener('mouseleave', function()
deleteButton.classList.remove('grow')
)
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("????️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function()
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList()
if (inputLength() > 0)
newTaskList();
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);
CSS ---------------------------------------- ------------------------------------
*
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* Main title and text box/button ------------------------ */
.container0
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
.title
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
h1
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
h1:hover
transform: scale(1.3);
#enter
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
.input-group
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
input
height: 35px;
width: 250px;
#enter:hover
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
/* Main body columns and inner divs ------------------------ */
.container1
margin: 5px;
display: flex;
flex-direction: column;
.pic1
background-image: url("../images/todo.jpg");
background-size: 100% 100%;
background-repeat: repeat;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
.pic2
background-image: url("../images/done.jpg");
background-size: 100% 100%;
height: 100vh;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
.usertextbox
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100vh;
.usertext
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
/* Titles and lists in active and completed columns ------------------------ */
h2
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
h2:hover
background-color: rgb(15, 15, 238);
color: white;
li
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
.completedLi
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
.grow
transform: scale(1.2);
【问题讨论】：
【参考方案1】：我认为您想要实现的是视差滚动。将这个 CSS 添加到您的图像中应该就足够了：
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
更多信息请看这里：W3Schools
我将 CSS 添加到您的 sn-p 中，但我不确定它是否有效，因为图像是相对路径并且在 *** 的服务器上不存在。
// assigning variable to the add task button
var addTask = document.getElementById("enter");
//assigning variable to input user enters in the add new task input section
var input = document.getElementById("userinput");
// returns the element that matches the CSS selector of 'ul' (vs the ID for getElementbyID)
var ul = document.querySelector("ul");
// created variable to assign to ul where I will append completed tasks
var completedTasks = document.getElementById("completedTaskList");
// simple function that calculates length of user input(really just making sure it's > 0)
function inputLength ()
return input.value.length;
// function to create new task list item and corresponding delete button
function newTaskList()
// var myList = document.getElementsByTagName("li");
// assigning variable to the li item we are creating when function is ran
var li = document.createElement("li");
var completedLi = document.createElement("li");
//appending the user's input value to the li element we just created
li.appendChild(document.createTextNode(input.value));
//now appending that li with the user input to the ul(we assigned ul variable to the ul in document using queryselector)
ul.appendChild(li);
// clearing input value of user when function is ran
var completed = input.value;
input.value = "";
// assigning the creation of delete button to the deleteButton variable
var deleteButton = document.createElement("button");
// styling that delete button
deleteButton.style.border = 'none'
deleteButton.style.transition = "all .3s ease-in-out";
deleteButton.style.backgroundColor = '#ffffff'
deleteButton.style.margin = '20px'
//adding event listeners to grow and remove grow when item is hovered with mouse
deleteButton.addEventListener('mouseenter', function()
deleteButton.classList.add('grow')
)
deleteButton.addEventListener('mouseleave', function()
deleteButton.classList.remove('grow')
)
//assigning text to delete button with createTextNode
deleteButton.appendChild(document.createTextNode("?️"))
// appending the delete button to each li that is created
li.appendChild(deleteButton);
// creating function that gives us access to parent element of delete button (which is li)
// and deletes it when we click delete
deleteButton.onclick = function()
completedLi.style.textDecoration = 'line-through'
completedTasks.appendChild(completedLi);
completedLi.appendChild(document.createTextNode(completed));
this.parentElement.style.display = "none";
//creating function that indicates to run addTaskList only if length of input from user is >0(they actually wrote something)
function addTaskList()
if (inputLength() > 0)
newTaskList();
// create event listener to have addTaskList function run if user clicks on add task button (variable we already created assinged to id of add button)
addTask.addEventListener("click", addTaskList);*
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* Main title and text box/button ------------------------ */
.container0
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(189, 174, 172);
height: 100%;
.title
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
h1
position: relative;
bottom: -15px;
transition: all .7s ease-in-out;
h1:hover
transform: scale(1.3);
#enter
border-radius: 50%;
height: 50px;
width: 70px;
font-size: 1.2rem;
font-weight: bolder;
background-color: rgb(173, 207, 238);
border: 3px solid rgb(99, 94, 93);
border-style: solid;
padding: 4px;
margin: 5px;
.input-group
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
margin-bottom: 50px;
position:relative;
left: 25px;
input
height: 35px;
width: 250px;
#enter:hover
background-color: rgb(15, 15, 238);
color: white;
border-color: white;
/* Main body columns and inner divs ------------------------ */
.container1
margin: 5px;
display: flex;
flex-direction: column;
height: 100%;
.pic1
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-right: 2.5px;
margin-left: 10px;
min-height: 100vw;
.pic2
background-image: url(https://images.unsplash.com/photo-1594482627762-6e876ce1ead4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
background-size: 100% 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
height: 100%;
font-weight: bolder;
padding: 0px;
margin-left: 2.5px;
margin-right: 10px;
min-height: 100vw;
.usertextbox
display: flex;
justify-content: center;
background-color: #ffffff;
width: 100%;
opacity: 0.8;
height: 100%;
.usertext
width: 500px;
margin: 5%;
font-weight: bold;
color: #000000;
height: 100%
/* Titles and lists in active and completed columns ------------------------ */
h2
position: relative;
right: -175px;
bottom: 15px;
width: fit-content;
padding: 15px;
background-color:rgb(173, 207, 238);
border-radius: 50%;
border-color: rgb(99, 94, 93);
border-style: solid;
border-width: 3.5px;
h2:hover
background-color: rgb(15, 15, 238);
color: white;
li
font-size: 1.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 50px;
.completedLi
font-size: 3.1rem;
padding: 2px;
position:relative;
left: -30px;
height: 60px;
.grow
transform: scale(1.2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/0d2a2061f5.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/normalize.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/css/todo.css">
<script defer src= "./static/JS/toDo.js"> </script>
<title>To Do List</title>
</head>
<body>
</div>
<div class="container0">
<div class="row">
<div class="title col-12">
<h1>To Do List</h1>
</div>
<div class="title col-12">
<div class="input-group">
<span>
<div class="submit" id="submitbutton">
<input id="userinput" type="text" placeholder="Enter new task here" maxlength="40">
<button id="enter">Add</button>
</div>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col pic1">
<div class="usertextbox">
<div class="usertext">
<h2>Active</h2>
<ul id="activeTaskList">
</ul>
</div>
</div>
</div>
<div class="col pic2">
<div class="usertextbox">
<div class="usertext">
<h2>
Completed
</h2>
<ul id="completedTaskList">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>希望我能帮上忙；）
【讨论】：
非常感谢您抽出宝贵时间帮助我！很亲切。不幸的是，它仍然无法正常工作:(我尝试了您推荐的 CSS 及其几种变体并阅读了 W3 文档，但我不确定这是视差滚动问题。基本上，当用户添加足够的新任务以导致页面开始滚动，图像被切断并且不会重复超出原始页面大小。 这很奇怪，但在你编辑帖子后它对我有用（至少在左侧站点上） 哦，我知道你的意思...原因是，容器的设置高度为 100vh，即屏幕高度...我将编辑帖子以匹配问题 好的，现在应该可以使用了 - 如果不行，请告诉我 谢谢，我还发现添加：overflow-y:scroll;到用户文本类也可以修复它！以上是关于向下滚动页面并添加新内容时背景图像不覆盖的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQuery slidetoggle() 时屏幕不向下滚动