Question

我在网站标题中显示图片时遇到了一些问题。有关如何让它出现的任何想法？图像文件也与html文件位于同一个文件夹中，所以我真的不知道为什么它没有显示出来。

这是CSS文件：

header {
width: 100%;
background-image: url("background1.jpg");
text-align: center;
padding: 5px;
}

body {
margin: 0;
padding: 0;
background: white;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: deeppink;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: pink;
}

这是HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Welcome to Fazbear Entertainment</title>
<link rel="stylesheet" href="css/fnaf.css"></link>
<script type="text/javascript" src="js/fnaf.js"></script>

</head>

<body>

</body>

</html>

Answer 1

如果您正确引用header

，它的效果非常好

＆＃13;

.header {  /* MODIFICATION */
width: 100%;
background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/global/global-franchise-blue-header.jpg");
text-align: center;
padding: 5px;
}

body {
margin: 0;
padding: 0;
background: white;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: pink;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: pink;
}

＆＃13;

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Welcome to Fazbear Entertainment</title>
<link rel="stylesheet" href="css/fnaf.css"></link>
<script type="text/javascript" src="js/fnaf.js"></script>

</head>
<div class="header">       <!-- MODIFICATION -->
  <h1>My website name</h1> 
</div>
<body>

</body>

</html>

＆＃13;

Answer 2

这样做

body {
    margin: 0;
    padding: 0;
    background: white;
    background-image: url("../background1.jpg");
}

事情是background-image位置是相对于css文件夹中的css文件位置，所以它在css文件夹中搜索文件时应该看一个文件夹向上（文件与html一起）。它也应该在body选择器而不是header内，因为它将是整个身体的背景图像，而不是html中根本不存在的header。

图像标题CSS

2 个答案: