CSS "Background-image" не отображается - PullRequest
Новая
       40

CSS "Background-image" не отображается

0 голосов
/ 23 сентября 2018

Я новичок в HTML и CSS и столкнулся с проблемой, которую просто не могу понять.Это было раньше в других попытках, но в этом случае я пробовал начальную загрузку.Так что я не думаю, что есть проблема (в каждом случае мой файл style.css уничтожает файлы css, используемые для начальной загрузки).Итак, вот факты.Я хочу создать логотип, который при наведении меняет внешний вид.Мой файл CSS связан, потому что фоновые цвета появляются.Опция наведения тоже отлично работает.Должно быть, я забыл что-то или не хватает знаний.Этот вопрос часто задают, но я не нашел ни одного ответа, способного помочь мне.

screenprint of the code, на случай, если вы захотите проверить его самостоятельно и мои файлы 

.mclogo {
	width: 45px;
	height: 45px;
	background-image: url('./pic/LogoMc1.png');
	background-color: red;
}

.mclogo:hover {
	background-color: blue;
	background-image: url('./pic/LogoMc2.png');
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="./public/style.css">

    <title>Server :: le rôle-play sur minecraft</title>
  </head>
  <body>
 <!--- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" role="navigation">
	<div class="container-fluid">
		<a class="navbar-brand" href="https://minecraft.net/en-us/"><div class="mclogo"></div></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
			<span class="navbar-toggler-icon"></span>			
		</button>
		<div class="collapse navbar-collapse" id="navbarResponsive">
			<ul class="navbar-nav mx-auto">
				<li class="nav-item active"> <a class="nav-link" href="#">Accueil</a></li>
				<li class="nav-item"> <a class="nav-link" href="#">Où suis-je ?</a></li>
				<li class="nav-item"> <a class="nav-link" href="#">Le serveur</a></li>
				<li class="nav-item"> <a class="nav-link" href="#">Nous rejoindre</a></li>
			</ul>
		</div>
	</div>
</nav>





    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Можете ли вы просмотреть свое изображение в браузере по указанному вами адресу?Другими словами, выводит ли изображение www.yourwebsite.com/pic/LogoMc1.png в адресную строку вашего браузера изображение?

Если путь неверен.

Если ваш браузер делает этонайдите изображение по этому адресу, попробуйте использовать абсолютный путь в объявлении CSS.Если это не сработает, вы должны переопределить эти объявления где-нибудь позже в своем файле CSS.

0 голосов
/ 23 сентября 2018

попробуйте удалить "."из вашего пути к файлу на вашем CSS.Чтобы относительные пути работали с CSS и HTML, необходимо убедиться, что они соответствуют стандартным обозначениям файлов

...