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

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

我不能为我的生活弄清楚发生了什么。起初我认为这是XAMPP问题，但后来我上传了它仍然无法正常工作。我试过单引号和双引号，不同的浏览器，无济于事。有什么想法吗？

Answer 1

由于根文件夹包含在XAMPP文件夹中，因此XAMPP用户需要能够访问计算机上的文件。 XAMPP默认用户为daemon。如果您因为daemon无法访问这些文件而获得403禁止访问消息。通过在您选择的文本编辑器中打开/Applications/XAMPP/xamppfiles/etc/httpd.conf，将XAMPP用户更改为您计算机的管理员用户。找到说

的块

User daemon
Group daemon

并将其更改为：

User yourUserNameHere
Group daemon

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

然后保存，重新启动XAMPP，然后重新加载页面。现在应该加载背景图像没有问题。

css background-image将不会显示在XAMPP for Mac OSX中

1 个答案: