为什么背景：url（local.png）不起作用答案

【问题标题】：Why does background: url(local.png) not work为什么背景：url（local.png）不起作用
【发布时间】：2021-01-02 14:41:10
【问题描述】：

我的问题是背景url() 属性仅适用于在线存储的图像。当我尝试显示本地存储的图像时，它不起作用。

我的文件夹结构：

index.html
源
- CSS
  - style.css
- 图片
  - 背景.png
  - 个人资料图片.png

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./src/css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> 
    <title>Document</title>
</head>
<body>
    <div class="profile-card">
        <div class="card-header">
            <div class="pic">
                <img src="./src/images/profilepicture.png" alt="">
            </div>
            <div class="name">###</div>
            <div class="desc">Front-End Developer</div>
            <div class="sm">
                <a href="#" class="fa fa-instagram"></a>
                <a href="#" class="fa fa-twitter"></a>
                <a href="#" class="fa fa-github"></a>
                <a href="#" class="fa fa-linkedin"></a>
            </div>
            <a href="#" class="contact-btn">Contact Me</a>
        </div>
        <div class="card-footer">
            <div class="numbers">
                <div class="item">
                    <span>120</span>
                    Posts
                </div>
                <div class="item">
                    <span>127</span>
                    Following
                </div>
                <div class="item">
                    <span>120k</span>
                    Followers
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    text-decoration: none;
}

body {
    height: 100vh;
    background: url(./src/images/background.png) no-repeat center;
    background-size: cover;
}

【问题讨论】：

我总是使用 url(example.com/images/background.png) 并且它有效。那怎么样？
@Albeld：相对路径更好的原因有很多，基本上是当您在 dev/test/prod 服务器之间移动项目时。

标签： html css

【解决方案1】：

这里最好使用相对路径。您必须将 css 文件中的路径更新为

background: url(../images/background.png) no-repeat center;

原因是您的 css 文件必须使用 ../ 进入一个目录，然后进入 images 文件夹 并在那里使用图像 background.png

【讨论】：

这张从 HTML 链接的图片是正确的 (./)，问题在于 CSS 中的背景图片。

【解决方案2】：

您必须设置相对于您的 CSS 文件的路径，或者从根目录设置绝对路径。

../images/background.png

或

/src/images/background.png

您的代码./src/images/background.png 尝试在src/styles/images/background.png 中搜索不存在的图像。

【讨论】：

【解决方案3】：

你的文件路径有问题。使用这个：

background: url(../images/background.png) no-repeat center;

【讨论】：