向下滾動頁面並添加新內容時背景圖像不覆蓋
[英]Background image doesn't cover when scrolling down page and new content is added
問題描述
我正在創建一個簡單的待辦事項列表，允許用戶添加和刪除項目。 一切都完全按照我的意願工作......除了......當用戶添加足夠的項目以導致頁面開始滾動時，我在兩個主要列上的背景圖像不再出現。 我雖然背景圖像重復會起作用，但它不會。
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 個解決方案
解決方案1
0 2021-12-13 20:33:16
我認為您要實現的是視差滾動。 將這個 CSS 添加到您的圖像中就足夠了：
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
更多信息請看這里： W3Schools
我將 CSS 添加到您的代碼段中，但我不確定它是否有效，因為圖像是相對路徑並且在 StackOverflow 的服務器上不存在。
// 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); }.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-attachment: fixed; background-position: center; background-repeat: no-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); }
<,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>
希望我能幫上忙；）
為什么縮小窗口時彩色背景不能完全覆蓋我的頁面？
[英]Why does the colorful background not cover my page completely when I scale down the window?
單擊時將新內容放入div中的Javascript-自動向下滾動到新內容不起作用
[英]Javascript for putting new content in a div upon click - automatically scrolling down to new content isn't working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.