css Mac OSX 的 XAMPP 中不会显示背景图片

Question

出于某种奇怪的原因，我网站上的所有内容都可以正常工作，但我的 div.hero 的背景图像不会显示。这是我的 HTML.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="assets/css/all.css"/>
    <link rel="icon" type="image/png" href="assets/img/favicon.png"/>
  </head>
  <body>
    <header>
      <?php include_once('header.php'); ?>
    </header>
    <main>
      <section>
        <div class="hero">
          <h1>My Awesome Site</h1>
        </div>
      </section>
    </main>
    <footer>
      <?php include_once('footer.php'); ?>
    </footer>
  </body>
</html>

这是我的 CSS

html, body, main, section {
  height: 100%;
  margin: 0;
}
.hero {
  position: relative;
  height: 100%;
  background: url(../img/baby-room.jpg) no-repeat fixed center;
  background-size: cover;
}

最后，我的文件结构在 Applications/XAMPP/xamppfiles/htdocs/ 中找到：

root/
  index.php
  assets/
    css/
      all.css
    img/
      baby-room.jpg
      favicon.png
  header.php
  footer.php

下面是真正疯狂的部分。如果我只是在我的 url(../img/baby-room.jpg) 前面添加 rgba(0,0,0,0.5)，我会得到一个半透明的黑色背景，这是我应该做的。这真的让我觉得这是一个路径问题。路径看起来很稳固，但是当我在单独的 window 中打开路径时，我得到一个 403 Access Forbidden 屏幕。

我这辈子都弄不明白发生了什么。起初我以为是 XAMPP 个问题，但后来我实时上传了它，但仍然没有用。我试过单引号和双引号，不同的浏览器，无济于事。有什么想法吗？

Answer 1

因为根文件夹包含在 XAMPP 文件夹中，XAMPP 用户需要能够访问计算机上的文件。 XAMPP 默认用户是 daemon。如果您收到 403 Access Forbidden 消息，那是因为 daemon 无权访问这些文件。通过在您选择的文本编辑器中打开 /Applications/XAMPP/xamppfiles/etc/httpd.conf，将 XAMPP 用户更改为您计算机的管理员用户。找到写着

的方块

User daemon
Group daemon

并将其更改为：

User yourUserNameHere
Group daemon

yourUserNameHere 实际上是您在执行卸载应用程序等操作时使用的用户名。它通常位于取景器 window 的左侧，旁边有一个主页图标。

然后保存，重新启动 XAMPP，然后重新加载页面。背景图片现在应该可以正常加载了。

css Mac OSX 的 XAMPP 中不会显示背景图片

css background-image won't display in XAMPP for Mac OSX

html

css

background-image