当使用 background-image url() 设置完整的封面背景图像时，我遇到了一个我无法弄清楚的问题。当我的桌面上有 index.html 文件、main.css 文件和图像文件时，图像在浏览器中显示正常。但是，当我将 .jpg 移动到 imgs 文件夹和 .css 文件时 enter image description here到 css 文件夹，图像将不会出现在浏览器中。
代码完全是从W3复制过来的，所以我想一定是我的文件夹结构有问题，但是我看不到。我以前从未见过这个问题。提前致谢!
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="bg"></div>
</body>
</html>
body,
html {
height: 100%;
}
.bg {
background-image: url("/imgs/ocean.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
最佳答案
改用此语法:因为 ./ 指的是当前文件夹，../ 指的是父目录，应该使用那个目录。
background-image: url("../imgs/ocean.jpg");
关于html - background-image: url() 当所有文件都在桌面上但不包含其文件夹中的文件时有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59172542/