时间戳

首页 > 解决方案 > 当我缩小浏览器时，我的背景图像没有响应

html - 当我缩小浏览器时，我的背景图像没有响应

问题描述

我正在关注关于使用引导程序创建网站的 youtube 教程（链接：https ://www.youtube.com/watch?v=V_lAhqLXT9A&t=851s ）但是一旦我到达设置背景图像的部分，它就没有变得像视频中一样响应。

这是我的html代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XxXx</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

</head>
<body data-spy="scroll" data-target="#navbarSupportedContent">   

<!-- Home -->

<div id="home">
  <nav class="navbar navbar-expand-md navbar-light fixed-top">
    <a class="navbar-brand" href="#">
    data-target="#navbarSupportedContent">
  <span class="navbar-toggler-icon"> </span>
    </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#services" id="navbarDropdown" role="button" 
data-toggle="dropdown">Our Services</a>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>

</ul>
</div>
</nav>
<!-- landning page -->
<div class="landing">
  <div class="home-wrap">
    <div class="home-inner"><img src="images/h2.png">
    </div>
  </div>
</div>

<div class="caption text-center">
  <h1>XXXXX</h1>
  <h3>xxxxxxxxxx</h3>
  <a class="btn btn-outline-dark btn-lg" href="#contact">Contact</a>
</div>
<!--end of landing page -->
</div>
<!-- About -->
<div id="about" class="offset">

</div>
<!-- Services -->
<div id="services" class="offset">

</div>
<!-- Contact -->
<div id="contact" class="offset">

</div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
</body>
</html>

我试图将 .home-inner{background-image: url(images/h1.png);} 放在我的 css 文件中，但它甚至没有上传图像。我尝试了 background-size:cover 并改变了它的位置，但没有任何改变。

标签： htmlcssresponsive

解决方案

您提出的问题有些武断，因此让我们将此视为调试常见图像加载问题的机会。

您已经特别询问了您的背景图片是否显示。

你的 CSS 声明

.home-inner {
    background-image: url(images/h1.png);
}

首先让我们检查有问题的元素。这些说明假定您使用的是 chrome，但可以在不同的浏览器中类似地使用。

  1. 右键单击<div class="home-inner">div 并“检查”。开发工具应该会打开，您应该会看到元素和样式选项卡打开。
  2. 在元素选项卡中，确保您的<div class="home-inner">元素突出显示。如果没有尝试展开或折叠环绕元素，直到您可以选择它。
  3. 一旦您选择了正确的元素，请查看您的样式选项卡。如果您的类.home-inner在样式表中正确声明，您将看到您的 css 样式的复制版本。与您上面的声明完全相同。
  4. 这是调试开始的地方。首先，#3 是真的吗？你看到你的css声明了吗？如果不是，则可能是您的 css 文件的路径存在问题，或者您的类名中存在拼写错误。如果您可以看到课程，请继续执行第 5 步。如果没有，请确定原因。
  5. 你能看到你的声明，但有一个删除线吗？如果是这样，那可能意味着浏览器找不到您的图像并且它是 404 的。这也会在控制台中显示错误，但让我们尽量保持简单。我喜欢使用的一个技巧是右键单击图像路径和“在新选项卡中打开”。完成此操作后，您将在 url 栏中打开一个页面，其中包含完整计算的图像路径。
  6. 查看该路径并尝试确定文件夹结构是否正确。例如，您暗示您的文件夹结构有一个图像文件夹，因此它可能看起来像这样：https://example.com/images/h1.png. 但也许您的图像文件夹是嵌套的，并且您的文件夹结构类似于：/assets/images/h1.png.
  7. 还没修好？你的css文件在哪里？如果它是嵌套的（不在根文件夹中），您将不得不在../图像路径中添加某种形式的 ，以便告诉浏览器正确查看的位置。例如，如果在/css/styles.css您的背景图片 url 中找到您的 css，则看起来需要如下所示 background-image: url(../images/h1.png);：方法是../返回一个文件夹。

调试上述内容可能会解决您的问题。如果没有，请使用其他详细信息更新您的问题。

推荐阅读