gpt4 book ai didi

html - 图片标题 CSS

转载 作者:行者123 更新时间:2023-11-28 16:06:43 26 4
gpt4 key购买 nike

我在将图像显示在我的网站标题中时遇到了一些问题。关于如何让它显示的任何想法?图像文件也与 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>

最佳答案

如果你正确地引用你的header,它工作得很好

.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;
}
<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>

关于html - 图片标题 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40623189/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com