CSS“背景图片”不显示
[英]CSS “Background-image” doesn't display
问题描述
I'm new to HTML and CSS and I encounter a problem that I just can't figure out. 
我是HTML和CSS的新手，遇到一个我无法解决的问题。 It has happened before in other attempts but in this case I was trying out bootstrap. 以前在其他尝试中已经发生过，但是在这种情况下，我正在尝试引导。 So I don't think that there's the problem (in every case, my style.css file crushes the css files used for bootstrap). 因此，我认为没有问题（在每种情况下，我的style.css文件都会粉碎用于引导的css文件）。 So here are the facts. 所以这是事实。 I want to create a logo that, when hovered, changes appearance. 我想创建一个徽标，将其悬停时会更改外观。 My css file is linked because the background colors does appear. 我的css文件已链接，因为确实出现了背景色。 The hover option works fine too. 悬停选项也可以正常工作。 I must have forgotten something or lack some knowledge. 我一定忘记了什么或缺乏知识。 This question is frequently asked but I haven't found any answer able to help me. 这个问题经常被问到，但是我没有找到任何可以帮助我的答案。
, in case you want to check it out yourself and my files
，以防您自己和我的文件查看
.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>
Thanks in advance. 提前致谢。
2 个解决方案
解决方案1
0 2018-09-23 05:06:48
try removing the "." 尝试删除“。” out of your file path on your css. 不在CSS上的文件路径中。 In order for relative paths to work on CSS and HTML, you need to make sure it follows standard file notation 为了使相对路径在CSS和HTML上起作用，您需要确保其遵循标准文件符号
解决方案2
0 2018-09-23 14:09:08
Can you view your image in the browser at the address you are specifying? 您可以在浏览器中指定的地址查看图像吗？ In other words, does typing www.yourwebsite.com/pic/LogoMc1.png into your browser's address bar bring up the image? 换句话说，在浏览器的地址栏中输入www.yourwebsite.com/pic/LogoMc1.png是否可以显示图像？
If not the path is wrong. 如果不是，则路径错误。
If your browser does find the image at that address, try using the absolute path in your CSS declaration. 如果浏览器确实在该地址找到了图像，请尝试在CSS声明中使用绝对路径。 If that doesn't work, you must be overriding these declarations somewhere later in your CSS file. 如果这不起作用，则必须稍后在CSS文件中的某个位置覆盖这些声明。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.