Question

好的，这是我的问题。由于某种原因，无论如何我都不会加载要用作网站背景的图像。我正在使用Notepad ++编写代码。我知道以前的测试图片不会加载它，所以我决定暂时搁置它，以处理实际背景。但是现在完成了，我面临着与以前完全相同的问题，没有明显的解决方案。有一次，我和我尝试使用image {}而不是url {}。我们尝试将其移动到html文件而不是css文件。没有。我不知道该解决方案是非常复杂还是如此简单，以至于沉积岩可以解决这个问题，我也不在乎。我只是想，需要工作。紧急求救

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #17003f;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #deccff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS\style.css">

</head>
<style>
hmtl {
	background-image: url(images folder/websitebackground.png);
	background-position: center;
	background-repeat: no-repeat;
}
</style>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgb(255,0,255)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "green";
}
</script>
     
</body>
</html>

代码复仇者，请组装！

Answer 1

删除此内容，您不应该在html标签下执行此操作。

<style>
hmtl {
    background-image: url(images folder/websitebackground.png);
    background-position: center;
    background-repeat: no-repeat;
}
</style>

以这种方式完成

body{
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
    background-image: url(images folder/websitebackground.png);
    background-position: center;
    background-repeat: no-repeat;
}

此外，也无需在html中执行此操作，您可以将其添加到css文件中，并确保您使用的url（）是正确的。

Answer 2

应该是这样。您应该为body标签而不是html这么做。另外，URL中的路径也需要加引号。

<style>
body {
    background-image: url("images folder/websitebackground.png");
    background-position: center;
    background-repeat: no-repeat;
}
</style>

Answer 3

首先，您应该将背景放在正文上，而不是html 其次，我认为您的链接有误，请尝试使用新的正确链接

body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #17003f;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #deccff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS\style.css">

</head>
<style>
body {
	background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=cold-vehicles-water-531880.jpg&fm=jpg);
	background-position: center;
	background-repeat: no-repeat;
}
</style>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgb(255,0,255)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "green";
}
</script>
     
</body>
</html>

Answer 4

首先使用适当的代码编辑器。它将控制您的错字。在CSS body标记中插入与背景相关的行。它应该出现在主体部分而不是整个HTML中的位置

 body {
    font-family: "Lato", sans-serif;
    transition: background-color .5s;

    background-image: url(images folder/websitebackground.png);
    background-position: center;
    background-repeat: no-repeat;
    }

Answer 5

因此，我将相关代码移回CSS并将其放在“ body”下，并且对我来说很好用。如果您需要参考，我为您创建了一个Codepen： https://codepen.io/gabor-szekely/pen/rQmWrL

body {   
  font-family: "Lato", sans-serif;   
  transition: background-color .5s;   
  background-image:   url(https://c402277.ssl.cf1.rackcdn.com/photos/11552/images/hero_small/rsz_namibia_will_burrard_lucas_wwf_us_1.jpg); 
  background-position: center;   
  background-repeat: no-repeat; 
}

您无法在“ html”下设置背景图片，而必须在“ body”下进行设置。另外，请确保您的url（）中的图像路径正确，否则显然也无法使用。

希望这会有所帮助！

Answer 6

您拼错了html（hmtl）

hmtl
您需要在url（）中添加“”，并且您不能在url中使用空格（图像 文件夹）

background-image：url（images folder / websitebackground.png）;
使用这样的背景图像，使用.css而不使用内联样式是很糟糕的。
请勿在CSS图片中使用html标签。

我的网站背景图片无法加载/显示

6 个答案: