Мое фоновое изображение не реагирует на мой браузер - PullRequest
Новая
       5

Мое фоновое изображение не реагирует на мой браузер

1 голос
/ 13 февраля 2020

Я следовал учебному пособию по YouTube по созданию веб-сайта с bootstrap (ссылка: 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: покройте и измените его положение, но ничего не изменилось.

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

Вопрос, который вы задаете, несколько произвольный, поэтому давайте рассмотрим возможность отладки общих проблем с загрузкой изображений.

Вы специально задали вопрос о появлении фонового изображения.

Ваша CSS Декларация 

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

Сначала давайте проверим рассматриваемый элемент . В этих инструкциях предполагается, что вы используете chrome, но они могут использоваться аналогичным образом в разных браузерах.

  1. Щелкните правой кнопкой мыши на элементе <div class="home-inner"> div и выберите «inspect». Должны открыться инструменты разработки, и вы увидите Элементы и Стили * Открытые вкладки .
  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? Если он вложенный (не в папке root), вам нужно добавить некоторую форму ../ в путь к изображению, чтобы указать браузеру, где правильно искать. Например, если ваш css найден в /css/styles.css, URL вашего фонового изображения должен выглядеть следующим образом: background-image: url(../images/h1.png);. ../ означает go назад на одну папку.

Вероятно, устранение вышеуказанной проблемы решит вашу проблему. Если нет, пожалуйста, обновите ваш вопрос с дополнительной информацией.

0 голосов
/ 13 февраля 2020

Если он не загружал фоновое изображение, скорее всего, указанный URL-адрес в функции url () неверен. Если это структура папок вашего проекта - root -images -index. html Тогда ваш код должен работать. Если структура с другой стороны отличается, то вы должны изменить путь, чтобы он соответствовал каталогу изображений.

Если изображение наконец загружается, обратите внимание, что вы должны добавить код CSS, подобный приведенному ниже: 

.home-inner img{
  object-fit: 'cover';
}

... особенно, когда на изображении определены фиксированные свойства ширины и высоты.

...