我无法通过CSS显示任何图像。如果我直接将它添加到带有IMG标记的HTML中,它将正常工作。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style/main.css" />
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="images/logo.png" alt="Logo"> <!-- Works -->
</div>
</header>
</div>
<footer></footer>
</body>
</html>
CSS:
.logo {
/* Doesn't work */
background-image: url("/images/logo.png");
}
发布于 2018-07-23 17:25:36
你应该检查项目的文件夹结构。
|_project
|_index.html
|_css
| |_style.css
|_js
| |_script.js
|_images
|_bg.jpg
在Project文件夹中:你可以通过输入
images/bg.jpg
因为index和图像文件夹都在同一级别。
在CSS或js文件夹中“:你可以通过输入
../images/bg.jpg
因为它们的级别不同,所以../
意味着SETP回一级,所以它把我们从css folder
到project folder
,然后是图像文件夹,这样我们就可以轻松地访问它了。
https://stackoverflow.com/questions/-100005637
复制相似问题