向下滾動頁面并添加新內容時，背景影像不覆寫-有解無憂

我正在創建一個簡單的待辦事項串列，允許用戶添加和洗掉專案。一切都按照我想要的方式作業......除了......當用戶添加足夠的專案以導致頁面開始滾動時，我的兩個主列上的背景影像不再出現。我雖然背景影像重復會起作用，但它不會。

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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);
}

uj5u.com熱心網友回復：

我認為你想要實作的是視差滾動。將此 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);
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

希望我能幫上忙;)

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/383708.html

標籤：javascript html css 图片背景

上一篇：將繪圖描述轉換為位圖的快速方法？

下一篇：如何更改python.docx上的影像布局選項？