我从头开始创建一个网站，所以到目前为止它还很空。我启动了第一个 div，css，然后像往常一样遇到了问题。背景图像不会显示。我试图将目录更改为与 HTML 相同的目录(通常位于/assets/img/中)。我还将它放入 photoshop 并将其导出为 png 以防出现问题。当我使用背景颜色代码时，它可以工作，但我无法使图像工作。我将在下面显示代码:
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%; }
最佳答案
我认为您的 img 链接中有错误更改此:
background-image: url('../assets/img/backdrop.png');
为此:
background-image: url('../img/backdrop.png');
关于html背景图片根本不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48539461/