如何在 css 和 html 中显示背景图像

TRS*_*RS7 0 html css

我正在尝试使用 css 在 html 中显示背景图像<section>。我使用 XAMPP 进行本地托管,URL 来自我的 Imgur 帐户。当我运行代码时,背景图像不会出现。有什么想法为什么图像无法显示吗?

.bigslide {
  background-image: url("https://imgur.com/haukzXN");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: 700px;
}
Run Code Online (Sandbox Code Playgroud)
  <nav class="nav">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#page1">Services</a></li>
      <li><a href="#page2">About Us</a></li>
      <li><a href="#page3">Contact</a></li>
      <li><a href="#social">Social</a></li>
    </ul>
  </nav>
</header>

<body>
  <div id="start">
    <h1>DT Professional Carpet Cleaning and Hanyman Service.</h1>
    <section class="bigslide">
    </section>
  </div>
Run Code Online (Sandbox Code Playgroud)

Tem*_*fif 6

您使用了https://imgur.com网站上的错误链接。您使用的链接不是图像的链接,而是在线查看图像的链接。

改用这个;

.bigslide {
  background-image: url("https://i.imgur.com/haukzXN.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  width: 700px;
}
Run Code Online (Sandbox Code Playgroud)
<section class="bigslide">
</section>
Run Code Online (Sandbox Code Playgroud)