已解决

Question

我不熟悉Web“开发”，并且在加载全屏图像作为背景时遇到了麻烦。我已经尝试了几种方法（如下所述），阅读了文档，一切对我来说都很好……但是仍然无法正常工作。

这是我的HTML结构（#home包含在正文中）：

<div id="home">
  <div class="landing-text">
    <h1>H1 TITLE</h1>
    <h3>H3 TITLE</h3>
    <a href="#" class="btn btn-default btn-lg">Come in !</a>
  </div>
</div>

和我的CSS（可能还没有完全完成，我正在学习教程）：

#home {
    background: url("img/mountains.jpeg");
    display: table; 
    height: 100%; 
    position: relative; 
    width: 100%;
    background-size: cover; 
}

为了简化起见，我还尝试删除除第一行以外的所有内容。

最后，我的文件夹结构（路径看起来不错，当我在路径上使用CTRL + clic时，文件已加载到VSCode中）：

- index.html
- style.css
- img
  |__ - mountains.jpeg

我尝试过用“替换”，将背景替换为背景图像，将#home替换为.home（并将html文件：id更改为class），清理浏览器缓存...但是没有任何效果。我的代码与w3school网站中的示例完全相同，但我应该错过一些内容。

我在做什么错了？

完整代码：

html,
body {
  height: 100%;
  width: 100%;
}

.navbar {
  background-color: #23415c;
  padding: 1% 0;
  font-size: 1.2em;
}

.navbar-brand {
  min-height: 55px;
  padding: 0 15px 5px;
}

.navbar-default .navbar-nav li a {
  color: #d5d5d5;
}
.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a.active {
  color: #fff;
}

#home {
  background: url("img/mountains.jpeg");
  display: table;
  height: 1000px;
  position: relative;
  width: 1000px;
  background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Landing Page Website Tutorial</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="style.css" rel="stylesheet" />
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class ="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse-main">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/w3newbie.png"></a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-main">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="active" href="#">Home</a></li>
        <li><a class="#" href="#">About</a></li>
        <li><a class="#" href="#">Work</a></li>
        <li><a class="#" href="#">Testimonials</a></li>
        <li><a class="#" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="home">
  <div class="landing-text">
    <h1>My buddie's name :^)</h1>
    <h3>Behind sound</h3>
    <a href="#" class="btn btn-default btn-lg">Come in !</a>
  </div>
</div>


<div class="padding">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <img src="img/bootstrap.png">
      </div>
      <div class="col-sm-6 text-center">
        <h2>All about how it sounds</h2>
        <p class="lead">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
          Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
        <p class="lead">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
            Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
      </div>
    </div>
  </div>
</div>

<div class="padding">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <h4>Blablabla</h4>
        <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
           Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <img src="img/sass.png" class="img-responsive">
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
          Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <img src="img/less.png" class="img-responsive">
      </div>      
    </div>
  </div>
</div>

<div id="fixed">
</div>

<div class="padding">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">
              <h4>Bloblobloblo</h2>
              <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
                Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500
                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
                Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
              <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
                  Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500
                  Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. 
                  Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500</p>
        </div>
        <div class="col-sm-6">
          <img src="img/bootstrap2.png" class="img-responsive">
        </div>
      </div>
    </div>
  </div>

<footer class="container-fluid text-center">
  <div class="row">
    <div class="col-sm-4">
      <h3>Contact me</h3>
      <br>
      <h4>contact info here</h4>
    </div>
    <div class="col-sm-4">
      <h3>Connect</h3>
      <a href="#" class="fa fa-spotify"></a>
      <a href="#" class="fa fa-soundcloud"></a>
      <a href="#" class="fa fa-bandcamp"></a>
      <a href="#" class="fa fa-youtube"></a>
    </div>
    <div class="col-sm-4">
      <img src="img/b.png" class="icon">    
    </div>
  </div>
</footer>


</body>
</html>

正如@Benjamin所说，这似乎是操作系统问题。

已解决

解决方案：正确设置我的开发环境

Answer 1

检查您是否已将CSS链接正确链接到html。

例如：

<link rel="stylesheet" type="text/css" href="style.css">

或更令人信服的是，请尝试使用<style>部分中的<head>元素将CSS放入html。

例如：

<style>
    #home {
        background: url("img/mountains.jpeg");
        display: table; 
        height: 100%; 
        position: relative; 
        width: 100%;
        background-size: cover; 
    }
</style>

Answer 2

这可能不是解决方案，但需要检查一下。

div #home的父元素是什么？

如果该父元素（div？）不是position:relative或absolute或fixed，则height:100%;width:100%将为零，并且图像在那里，但不可见。如果父div不属于上述条件之一，则百分比不起作用。

要检查的另一件事是在DevTools（Chrome中的F12）中，将鼠标悬停在指定图像的CSS代码上，如果链接有效，您将看到链接图像的缩略图。如果看不到该图像，则说明该图像未链接。

请注意，如果您的css文件位于单独的文件夹中，则图像路径必须相对于css文件相对（因此，如果您的css位于css/styles.css之类的位置，则链接应为../img/mountains.jpg

XAMPP / WAMP / MAMP

这可能会解决您的操作系统问题。

您是否了解XAMPP / WAMP / MAMP /等环境？在Windows或Mac计算机上，您可以安装上述软件之一（XAMPP具有适用于Windows / Mac或Linux的版本-Wamp是Windows-Mamp是Mac），它们各自安装了在您的计算机上创建测试Web服务器环境所需的完整环境。电脑。例如，它们都包括：

* Apache (the webserver)
* PHP (server-side language)
* MySQL (now called MariaDB due to copyright issues)
* perl

安装环境后，打开浏览器，然后在地址栏中键入localhost，然后按Enter。有默认的网页，您可以更改/编辑/替换/等。

我个人更喜欢xampp（使用了多年），但是一切正常。 MAMP已扩展，现在也具有Windows版本。 WAMP现在称为WAMPSERVER。

使用XAMPP时，它将安装在您告诉它的任何位置（我通常接受默认的c：\ xampp），然后在c:\xampp\htdocs 中找到您的“网站”（对于超文本文档，如HTml） 。您可以在其中创建一个文件夹，例如bob，然后在该bob文件夹中创建一个index.html，然后通过在浏览器中键入以下内容来看到“网站”：http://localhost/bob < / p>

在您从GoDaddy购买的普通共享托管帐户上，localhost文件夹（即真正的c:\xampp\htdocs文件夹）就是public_html文件夹。

虚拟主机：避免使用GoDaddy。相反，请检出NameCheap，WebHostPython和A2。您花更少的钱就能得到更多，而不会感到意外。预计每年要为托管支付50美元，为域名每年支付15/20美元。例如，在webhostpython，您可以像GoDaddy一样获得5个域，但是您还可以同时使用python和node.js，而大多数其他主机都没有。另外，购买新域名的最佳地点是NameCheap-他们的销量非常好。例如，在撰写本文时，您可以以不到$ 1的价格购买.site或.fun域（第一年，这对于您只想测试的一次性域非常有用）。

Answer 3

首先，您需要确定图像的路径。

我认为您需要按像素而不是百分比height:400px;设置高度值或min-height:400px;

基本CSS：未加载背景img

已解决

3 个答案:

XAMPP / WAMP / MAMP