Фоновый URL, работает только одно изображение

Я все еще изучаю HTML / CSS / Js и следил за этим руководством на YouTube.

https://thewikihow.com/video_7MDJtw3ZF-4&t=893s

У меня проблема с отметкой времени около 20:15, мои eyes.png не отображаются. Я нахожу это странным, потому что мой face.png отлично отображается, он находится в той же папке.

<p class = "location"></p>

<div class = "container">
    <div class = "face_body">
        <div class = "face">
            <div class = "eye_pan">
                <div class = "pan_area">

                        <div class = "eye eye_l">
                            <div class = "eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

и мой css

    html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(images/face1.1.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(images/eyes.png);
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}

любые причины, по которым мой eyes.png не отображается, было бы здорово. Спасибо.

Проверьте очевидное. То же самое написание в вашем коде и файле? Глаза png находятся в ожидаемом месте. Используйте инструменты разработчика браузера (F12) и их вкладку сети, чтобы узнать, находится ли ресурс. Затем осмотрите элементы «глаза» с помощью инструмента проверки элементов, чтобы увидеть, какие стили применены.

Jon P 23.07.2018 07:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
83
3

Ответы 3

Ваш фон URL-адреса .eye, вероятно, ссылается на неправильный URL-файл или просто не отображается.

Попробуйте вставить background-size: cover; или установите background-size, если изображения кодируются нормально.

html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
  background-size:cover;
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}
<p class = "location"></p>

<div class = "container">
    <div class = "face_body">
        <div class = "face">
            <div class = "eye_pan">
                <div class = "pan_area">

                        <div class = "eye eye_l">
                            <div class = "eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

Проверьте правильность написания, например «глаз» вместо «глаза», а также проверьте формат файла, если в нем написано «jpg», а не «png».

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

Цитаты не являются обязательными - неправильными - для URL-адреса в этом случае. stackoverflow.com/questions/2168855/…

Lain 23.07.2018 08:03

Примените правильный синтаксис CSS для свойства background и проверьте правильность пути к изображению.

background: url('images/eyes.png');

Попробуйте это и дайте мне знать, если проблема все еще возникает.

Хорошего дня, ура !!!

На самом деле у меня была такая же проблема с моим первым фоном изображения из-за того, что путь к изображению не начинался с того места, где находился мой файл CSS. Итак, после того, как я исправил это, наконец, появился мой face.png. Поскольку мои eyes.png и face.png находятся в одной папке, я не понимаю, почему он не отображается, синтаксис правильный, я считаю. Даже с цитатами и без них.

spotTop 23.07.2018 16:52

Привет, можете ли вы проверить браузер и правильно ли там загружать файл eye.png. из этого вы можете подтвердить, что ваш путь к изображению правильный или нет. проверьте и отправьте мне сообщение.

VSM 24.07.2018 13:30

Другие вопросы по теме