Question

我从头开始创建一个网站，所以到目前为止这个网站已经很空了。我开始了第一个div，css然后我遇到了像我一直这样的问题。背景图像不会显示。我试图将目录更改为与HTML相同（通常在/ assets / img /中）。我也将它放入photoshop并将其导出为png incase，这就是问题所在。当我使用背景颜色代码时，它可以工作，但我无法使图像工作。生病显示代码如下：

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="apple-touch-icon" href="assets/img/logo.png"/>
<link rel="shortcut icon" href="assets/img/logo.png"/>
<link rel="stylesheet" href="assets/css/style1.css"/>
</head>
<body>
<div id="content">
<h1>content</h1>
</div>
</body>
</html>

CSS：

body, html {
margin: 0;
padding: 0;
font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
width: 100% !important;
height: 100% !important;
background-image: url('../assets/img/backdrop.png');
background-color: transparent;
}

h1,h2,h3,h4,h5,h6 {
margin: 0 0 .5em;
font-weight: 500;
line-height: 1.1;
}

h1 { font-size: 2.25em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.375em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .875em; }

#content {
max-width: 80em;
margin: 0 auto;
background-color: rgba(255,255,255,.3);
}

.img-responsive { max-width: 100%; }

Answer 1

我认为您的img链接中存在错误更改：

background-image: url('../assets/img/backdrop.png');

到此：

background-image: url('../img/backdrop.png');

Answer 2

尝试将其更改为

background-image: url('../img/backdrop.png');

html背景图片根本没有显示

2 个答案: