gpt4 book ai didi

html - 无法显示背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 10:54:28 25 4
gpt4 key购买 nike

我正在尝试为我的页面设置多个背景图像,但我无法使用外部 CSS 文件这样做,而且我不知道是我做错了什么,还是 Notepad++ 或 XAMPP 有问题,因为我的代码似乎是功能性的。

注意:

  • 我使用的图像已开启所有权限。
  • 如果我使用内联 CSS,我可以看到图像,但当我使用外部 CSS 文件。
  • 当我使用图像标签时,我也能看到图像。

图像标签(这个有效)

<img src="img/bg1.png" alt="">

测试 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>

<!-- Custom Cascading Styling Sheet -->
<link rel="stylesheet" type="text/css" href="css/custom-styles.css">

</head>
<body>

</body>
</html>

外部 CSS 代码:custom-styles.css

示例 1(这不起作用):

    body {
background-image: url('img/bg1.png'), url('img/bg2.png'), url('img/bg3.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

示例 2(这不起作用):

    body {
background-image: url('img/bg1.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

示例 3(这不起作用):

body {
background-image: url('img/bg1.png');
}

最佳答案

外部 css 文件中的图像是相对于该 css 文件的。 html 中的图像(无论是 img 标签还是(内联)css)都是相对于该 html 文档的。

假设你有这样的结构:

/
/css
style.css
/img
image.jpeg
index.html

index.html 中,您可以将该图像引用为 img/image.jpeg。但是,在 style.css 中,您必须先进入一个目录,因此 url 将变为 ../img/image.jpeg

您还可以使用绝对 url,或相对于根目录的 url。这些可以在引用它们的任何文件中使用。因此,如果您使用 http://example.com/img/image.jpeg/img/image.jpeg,它们应该可以在任何地方使用。请注意,在本地主机上开发时,完整的 url 很麻烦,因为您的主机名可能与在线主机名不同。

要调试此类问题(在 chrome 中),您应该打开开发人员控制台,转到“网络”选项卡,按“img”过滤并查找列表中的任何红色行。他们很可能会说服务器返回了 404 响应(找不到图像)。检查浏览器试图获取的 url。如果您知道站点的目录结构,应该很容易发现问题出在哪里。另请注意,您可以在发起者列中看到谁发起了请求。单击链接可直接转到请求图像的代码行。

enter image description here

关于html - 无法显示背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34748417/

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