Изображение не загружается с помощью CSS - PullRequest
Новая
       29

Изображение не загружается с помощью CSS

0 голосов
/ 03 ноября 2019

Я ссылался на несколько разных вопросов о переполнении стека и пробовал решения, которые кажутся похожими на мои, и я не могу найти ответ. Почему изображение не загружается?

Я пытался использовать их как в теге класса, так и в теге body. Я пробовал взад и вперед косые черты. Я пытался очистить кэш. Я попытался добавить дополнительные правила для высоты и ширины содержимого. Все безрезультатно. Я пробовал локальные и pixabay URL-адреса. background-image: image ('../ img / eye.jpg');background-image: url ("img / eye.jpg"); 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles\styles.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Front Page</h1>      
    </div>    
  </body>
</html>


* {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 auto;
  width: 1000px;
}

.img-eye {
  background-image: url("https://pixabay.com/photos/dog-bathing-sea-waves-portrait-4565646/");
  background-size: 100%;
  height: 200px;
  width: 300px;
}

body {
  background-image: image('../img/eye.jpg');
  background-color: #000;
}

Нет сообщений об ошибках ничего. Проклятая вещь - мертвая кастрюля. Код также на JS Fiddle. https://jsfiddle.net/greenthingsjump/htq4os9c/1/

Ответы [ 3 ]

2 голосов
/ 03 ноября 2019

Вы должны ссылаться на URL изображения с расширением изображения (jpg, png, svg). Вы ссылаетесь на страницу со встроенным изображением. Попробуйте изменить стиль тела, чтобы включить этот URL:

https://cdn.pixabay.com/photo/2019/10/21/10/04/dog-4565646_1280.jpg

Вы также не используете свой класс img-eye, если вы не знали.

0 голосов
/ 05 ноября 2019

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

0 голосов
/ 03 ноября 2019

Вы не ссылаетесь на класс img-eye в своем html. Кроме того, убедитесь, что вы используете правильный путь для вашего местоположения изображения

...