Question

我正在尝试为我的页面设置多个背景图片但是我无法使用外部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');
}

Answer 1

外部css文件中的图像与该css文件有关。你的html中的图像（无论是img标签还是（内联）css）都与该html文档有关。

假设你有这样的结构：

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

在index.html内，您可以将该图片引用为img/image.jpeg。但是，在style.css内，您必须首先上一个目录，因此网址将变为../img/image.jpeg。

您还可以使用相对于根的绝对网址或网址。那些可以在它们被引用的任何文件中工作。因此，如果您使用http://example.com/img/image.jpeg或/img/image.jpeg那些应该可以在任何地方使用。请注意，在localhost上进行开发时，完整的URL会很痛苦，因为您的主机名可能与在线时不同。

要调试这些问题（在chrome中），您应该打开开发人员控制台，转到＆＃34; network＆＃34;标签，按＆＃34; img＆＃34;过滤并查找列表中红色的任何行。他们很可能会说服务器返回了404响应（找不到图像）。检查浏览器尝试获取的URL。如果您知道站点的目录结构，应该很容易发现出错的地方。另请注意，您可以在启动器列中查看谁发起了请求。单击该链接可直接进入请求图像的代码行。

Answer 2

你需要给出相对路径，所以我猜你需要的是：

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

Answer 3

background: url('../../../static/images/index_hero.jpg');

.nameofclass {
    background: url('../../../static/images/index_hero.jpg');
}

Answer 4

但以下代码本身对我有用

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

您只需从简单代码中的html模板中跟踪跟踪和错误方法..

注意：检查您是否已关闭保龄球中的图像查看功能。： - ））））

无法显示背景图像

4 个答案: