HTML 和 CSS 背景不显示？答案

【问题标题】：HTML and CSS Background doesn't display?HTML 和 CSS 背景不显示？
【发布时间】：2018-03-25 18:25:12
【问题描述】：

我正在尝试获取图像以使用 css 背景图像显示图像，但我无法获取要渲染的图像。

CSS 在这里：

body{
    margin: 0px;
    padding: 0px;
   background-image: url(/steampunk/wallpaperSteampunk_B.jpg);
  background-size: cover;
}

HTML 在这里：

<html>
    <head>
        <link href="Main.css" rel="stylesheet"/>
        <script src="jquery-1.10.2.min.js"></script>
        <script src="JQUERY%20Main.js"></script>

    </head>
    <body>
        <div id="box">
            <div id="main"></div>

CSS 中的所有内容都可以正常工作，除了 BG 图像，我在这里缺少什么？

提前致谢。

【问题讨论】：

你需要 ' 在你的 bg 路径周围
@JoeWarner — 不。URL 中没有需要引号的字符。
问题的最可能原因是您输入了错误的 URL。如果您的浏览器的开发人员工具使用“网络”选项卡来确保正在请求图像并查看服务器如何响应请求（例如，它可能被禁止或未找到）。
@wasaach 您使用的是 Web 服务器还是纯 html 文件？

标签： javascript html css material-design css-animations

【解决方案1】：

如果您只是使用在浏览器中打开的 html 文件，您需要使 url 相对于文件 并跳过 url 开头的 /。像这样：

background-image: url(steampunk/wallpaperSteampunk_B.jpg);

如果您在网络服务器中运行代码，您的 url 是正确的并且可以正常工作，因为它相对于主机的根目录：

background-image: url(/steampunk/wallpaperSteampunk_B.jpg);

【讨论】：

【解决方案2】：

除了背景图片路径上的'，还需要设置高度。

【讨论】：

@th.stamond 不需要将网址放在引号中。
不需要设置高度。默认情况下，body 元素的背景会转移到 html 元素并应用到视口或页面，以较大者为准。