gpt4 book ai didi

html - 使用本地镜像时 CSS 背景图像不起作用

转载 作者:可可西里 更新时间:2023-11-01 13:50:44 24 4
gpt4 key购买 nike

这是我第一次发帖。如果这是一个基本问题,我深表歉意,但我很难思考我可能做错了什么。

所以,我正在尝试做一些非常基础的事情。我只是想拉伸(stretch)图像作为 body 的背景。

这是我的 CSS。

body {
margin: 0;
background-image: url('../images/background.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center;
position:relative;
color: #fff;
font-family: Calibri, sans-serif;
font-size: 100%;
line-height: 1.5em;
}

很简单。现在,当我从互联网上提取任何图像并将其插入背景图像的 URL 时,它工作得很好。但是,每当我尝试使用本地镜像时,它都不起作用。

在这个网站上,我试图创建(用于作业),我有一个带有 index.php 的主文件夹,然后是三个子文件夹:css、js 和图像。显然,我把背景图片放在了images文件夹中。但是,我也尝试将背景、jpg 移动到 css 文件夹并简单地放入“background.jpg”,但这也不起作用。

哦,据我所知,这张图片确实有效。

我做错了什么???

编辑:这是我的 HTML 供引用。我几乎是在制作一个连接到 mySQL 服务器的即时消息框。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title> My Shoutbox Project </title>
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>
<script src="js/shoutbox.js"></script>
</head>

<body>
<div id="container">

<header>
<h1>My Shoutbox</h1>
</header>
<div id="shouts">
<ul>
<li>foobar</li>
</ul>
</div>
<footer>
<form>
<label for="name">Name </label>
<input type="text" id="name" maxlength="20">
<label for="shout">Shout Text </label>
<input type="text" id="shout" maxlength="140">
<input type="submit" id="submit" value="SHOUT!">
</form>
</footer>

</div> <!-- close container -->

</body>
</html>

还有很多代码,因为我正在运行一些 PHP(老实说,我根本不太了解 PHP...我正在慢慢弄清楚。)

最佳答案

我将您的代码复制并粘贴到我的环境中,并且没有问题。我的文件安排:

http://localhost/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

如果你有这样的安排

http://localhost/shoutbox/shoutbox.html
http://localhost/css/main.css
http://localhost/images/background.jpg

你需要改变

<link rel="stylesheet" href="../css/main.css"> 

<link rel="stylesheet" href="/css/main.css">

(单个/告诉它转到顶层)或将图像和 css 文件夹移动到 shoutbox 文件夹中。

(请注意,由于看不到您的完整文件结构,我正在做一些假设)

关于html - 使用本地镜像时 CSS 背景图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34959534/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com