背景图像不从外部CSS文件呈现到.php——与.html（主体标记）完美结合_Php_Html_Css

背景图像不从外部CSS文件呈现到.php——与.html（主体标记）完美结合

php html css

背景图像不从外部CSS文件呈现到.php——与.html（主体标记）完美结合,php,html,css,Php,Html,Css,因此，我试图为我的网站的所有页面提供一个背景图像。我使用一个外部css文件完成了这项工作，当我以.html格式查看我的项目时，它工作得非常好。我现在需要在我的代码中使用PHP，因此我已将html文件传输到PHP，并设置了本地主机等。现在，当我从本地主机查看网站时，除了背景图像外，所有内容的样式都与预期的完全一致。我不知道如何从外部css中提取此背景图像并将其链接到my.php，以便背景图像也呈现。背景是纯白色的，而不是我想要的背景照片下面是我的html代码： <!DOCTYPE html

因此，我试图为我的网站的所有页面提供一个背景图像。我使用一个外部css文件完成了这项工作，当我以.html格式查看我的项目时，它工作得非常好。我现在需要在我的代码中使用PHP，因此我已将html文件传输到PHP，并设置了本地主机等。现在，当我从本地主机查看网站时，除了背景图像外，所有内容的样式都与预期的完全一致。我不知道如何从外部css中提取此背景图像并将其链接到my.php，以便背景图像也呈现。背景是纯白色的，而不是我想要的背景照片

下面是我的html代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PlexQ</title>
<link rel="stylesheet" type="text/css" href="/CretanQ/styles/style.css">
<script src="scripts/form.js"></script>
</head>
<body>

<!-- NavBar -->
<nav>
  <div class="logo">
    <img src="images/cretanq.png" alt="Cretan Logo" width="180px" height="75px">
  </div>
 </nav>

<!-- Registration Pop-up (Hidden) -->
<div class="pop_container" id="register_pop">
  <form action="/action_page.php">
    <h1>Registration</h1>
    <ul>
      <li>Fill in this information to create an account.</li>
      <li>Please allow up to 24 hours for email invitation to CretnVision upon approval. 
    </li>
    </ul>

    <label for="uname"><b>Name</b></label>
    <input type="text" placeholder="First Last" name="uname" required>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat"      required>


    <button type="submit" onclick="openPop()">Register!</button>
    <button type="submit" onclick="closeForm()">Close</button>
  </form>
  </div>

<!-- Registration Confirmed Popup (Hidden)-->
<div class="pop_container" id="confirm_pop">
  <form action="/Users/domenicorocca/CretanQueue/login.html">
    <h2>Registration Complete</h2>
    <ul>
      <li>Invitation to CretnVision will be sent via re-mail which was used to complete       registration upon approval.</li>
    </ul>

    <button type="submit" onclick="home()">Login!</button>
  </form>
</div>

 <!-- Login Box -->
<div class="container" id="login_container">
  <form action="action_page.php" method="post">

    <label for="email"><b>E-mail</b></label>
    <input type="text" placeholder="Ex: stranger@email.com" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>


      <button type="submit" id="login_button">Login</button>
      <button class="register" onclick="openRegister()">Register!</button>
      <span id="psw"><a href="#">Forgot password?</a></span>

  </form>
  </div>
  </body>
</html>

由于.php文件位于根文件夹中，css文件位于/CretanQ/styles/style.css中，因此您必须在css上使用正确的图像位置。您可以先调试以确保图像链接正确。转到您的页面控制台，在google chrome中单击右键并单击Inspect（Ctrl+Shift+I），然后单击Elements并单击，然后在右下角查看样式。您将看到您的css主体类。光标悬停在（images/background1.jpg）上。如果你在悬停上看到你的图像，那没关系，但我想你不会在那里看到你的图像。因为您找不到该文件。您必须在link/之前使用../before，因此您的样式代码如下所示：

body {background: url(../images/background1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我发现它显然与另一个样式表相关联。。。错误的基础。

谢谢您的时间。

您的css错误：这是正确的：背景：url（images/background1.jpg）无重复中心修复；因此，当我在浏览器上检查元素时，我会看到样式部分，当我在浏览器的检查元素部分将文件位置更改为（../images/background1.jpg）时，我的背景图片会弹出。但是当我试图在css文件中对我的源代码进行同样的更改时，什么也没有发生。这让我大吃一惊。尽管我编辑了我的代码，使之与上面的代码相匹配，这些代码在inspect元素面板中也起作用。每当我刷新页面并检查元素时，它仍然会显示这个文件路径——url（/Users/domenicoroca/CretanQueue/images/background1.jpg）no repeat centerfixed@cheattowin77这意味着您的源代码与您所说的不完全相同。您应该完全看到（背景：url（../images/background1.jpg）您也可以在控制台中尝试3dots（background:url（…/images/background1.jpg），因为您的css文件位于2个子文件夹下。

body {background: url(../images/background1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}