Я все еще изучаю 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 не отображается, было бы здорово. Спасибо.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваш фон 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/…
Примените правильный синтаксис CSS для свойства background и проверьте правильность пути к изображению.
background: url('images/eyes.png');
Попробуйте это и дайте мне знать, если проблема все еще возникает.
Хорошего дня, ура !!!
На самом деле у меня была такая же проблема с моим первым фоном изображения из-за того, что путь к изображению не начинался с того места, где находился мой файл CSS. Итак, после того, как я исправил это, наконец, появился мой face.png. Поскольку мои eyes.png и face.png находятся в одной папке, я не понимаю, почему он не отображается, синтаксис правильный, я считаю. Даже с цитатами и без них.
Привет, можете ли вы проверить браузер и правильно ли там загружать файл eye.png. из этого вы можете подтвердить, что ваш путь к изображению правильный или нет. проверьте и отправьте мне сообщение.
Проверьте очевидное. То же самое написание в вашем коде и файле? Глаза png находятся в ожидаемом месте. Используйте инструменты разработчика браузера (F12) и их вкладку сети, чтобы узнать, находится ли ресурс. Затем осмотрите элементы «глаза» с помощью инструмента проверки элементов, чтобы увидеть, какие стили применены.