background-image 相关问题

background-image CSS属性为元素设置一个或多个背景图像。

CSS 中的背景图像未显示

我想为我的网页正文显示背景，我尝试直接使用 CSS 中的背景图像，但图像没有显示，我检查并验证了扩展名并...

html css image background-image

回答 1 投票 0

CSS 背景图像仅在我将图像与项目 index.css 文件位于同一文件夹中时才会出现

如果我的行话有点奇怪，请原谅我，因为我还是这个东西的初学者...... 我正在尝试使用 CSS 和相对路径打开图像。当我使用图像的相对路径时我...

css directory path background-image

回答 1 投票 0

我如何通过 html tailwind css 中的管理按钮更改图像背景

下面是代码，它似乎运行正常，但我在网站上看不到背景图片下面是代码，它似乎运行正常，但我在网站上看不到背景图片 <!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>  <body>  <div class="bg-gray-800 text-white p-4">  <button class="bg-blue-500 text-white px-4 py-2 rounded" onclick="showImageForm()" > Admin </button> </div>   <div id="bodyContainer"></div>   <div></div>    <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>  </html> 我一次又一次地尝试了上面的代码，但看不到图像，我不知道出了什么问题。请帮助我，我不知道接下来该怎么做。我真的很期待在你们的帮助下解决这个问题。上面的js代码工作正常，但问题是类bodyContainer的div的高度为0，为该类添加除0以外的高度，例如500px以使其工作

html image file-upload tailwind-css background-image

回答 1 投票 0

如何阻止 Firefox 背景 CSS 重复图像图案显示图像边缘？

我正在开发一个网页，其背景是带有 1 像素 x 1 像素正方形的黑白棋盘格。我正在尝试在互联网上找到的不同 CSS 背景，但 Firefox 无法正确显示它......

css reactjs firefox background-image

回答 1 投票 0

Android 应用程序看不到背景图片

使用 Jetpack-Compose 对 Kotlin 代码进行 USB 调试后，我在 Android 应用程序上看不到任何背景图像。源码如下：包 com.example.happybirthday 导入 android.os....

android kotlin background-image

回答 1 投票 0

自定义 Tailwind css 背景图像在部署时不显示

我在 tailwind.config 文件中自定义了背景图像，它按预期显示在本地主机上，但是当我在 Github 页面上部署站点后，背景图像不显示。他...