下面是代码，它似乎运行正常，但我在网站上看不到背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Wallpaper Change</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Main body div start -->
<body>
<!-- Header div Start -->
<div class="bg-gray-800 text-white p-4">
<!-- Admin Button -->
<button
class="bg-blue-500 text-white px-4 py-2 rounded"
onclick="showImageForm()"
>
Admin
</button>
</div>
<!-- Header div end -->
<!-- Body div start -->
<div id="bodyContainer"></div>
<!-- Body div end -->
<!-- Footer div start -->
<div></div>
<!-- Footer div end -->
<!-- Image Upload Form -->
<!-- Image Upload Form -->
<div
id="imageFormContainer"
class="hidden fixed top-0 left-0 w-screen h-screen bg-gray-500 bg-opacity-75"
>
<form id="imageForm" class="p-8 bg-white max-w-md mx-auto mt-16 rounded">
<label for="imageInput" class="block mb-4 text-lg font-semibold"
>Upload Image:</label
>
<input type="file" id="imageInput" class="mb-4" accept="image/*" />
<button
type="button"
onclick="changeBackground()"
class="bg-blue-500 text-white px-4 py-2 rounded"
>
Change Background
</button>
<button
type="button"
onclick="hideImageForm()"
class="bg-gray-500 text-white px-4 py-2 ml-4 rounded"
>
Cancel
</button>
</form>
</div>
<script>
// Function to show the image upload form
function showImageForm() {
document
.getElementById("imageFormContainer")
.classList.remove("hidden");
}
// Function to hide the image upload form
function hideImageForm() {
document.getElementById("imageFormContainer").classList.add("hidden");
}
// Function to change the background dynamically
function changeBackground() {
const fileInput = document.getElementById("imageInput");
const bodyContainer = document.getElementById("bodyContainer");
if (fileInput.files.length > 0) {
const imageURL = URL.createObjectURL(fileInput.files[0]);
bodyContainer.style.backgroundImage = `url('${imageURL}')`;
bodyContainer.style.backgroundSize = "cover";
bodyContainer.style.backgroundRepeat = "no-repeat";
bodyContainer.style.backgroundPosition = "center";
}
hideImageForm();
}
</script>
</body>
<!-- Main body div end -->
</html>
我一次又一次地尝试了上面的代码，但看不到图像，我不知道出了什么问题。请帮助我，我不知道接下来该怎么做。我真的很期待在你们的帮助下解决这个问题。
上面的js代码工作正常，但问题是类bodyContainer的div的高度为0，为该类添加除0以外的高度，例如500px以使其工作