时间戳

首页 > 解决方案 > 基本 CSS：背景图像未加载

html - 基本 CSS：背景图像未加载

问题描述

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

这是我的 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更改为类），清理我的浏览器缓存......但没有任何效果。对我来说，我的代码看起来与 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 所说，看起来这是一个操作系统问题。

解决了

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

标签： htmlcss

解决方案

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

前任：

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

或者为了更有说服力，尝试通过使用<style>部分中的元素将您的 css 放入 html 中<head>。

前任：

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

推荐阅读