我是 HTML 和 CSS 的新手，我是为学校而写的。
突然我的背景图片消失了，我不知道是什么问题!
背景图片是 gradient-bg.jpg 并且与标题图片在同一目录中。
我忽略了什么？
HTML:
<head>
<meta charset="utf-8" />
<title>
Laboration 1 av Emil
</title>
<link rel="stylesheet" type="text/css" href="style/stilmall.css" />
</head>
<body id="backnd">
<div id="wrapper">
<div id="header">
<h1 class="title">Musikbaren</h1>
</div>
<article id="content" style="float:left">
<h2 class="Rubrik">Detta är en rubrik</h2><hr/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta tristique faucibus. Cras id faucibus massa, vitae scelerisque dui. Vivamus sollicitudin arcu arcu, a cursus risus efficitur non. Pellentesque quis nisl a erat tempus scelerisque eu nec sapien. Aliquam nec mauris iaculis, varius tellus ac, sagittis dui.
</article>
<nav id="navbar" style="float:right">
<ul class="button-group">
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
<LI class="button"><a href="#" >Meny 1</a></LI>
</ul>
</nav>
<footer id="footer" style="text-align: center;">
Här skrivs kontaktuppgifter!!!!!!!!!!!!!
</footer>
</div>
</body>
</html>
CSS 文件:
#wrapper {
background-color: white;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
margin: 0 auto;
width: 980px;
min-width:980px;
border: solid 3px white;
}
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
#header {
background-image:url('../images/header-bg.jpg');
background-repeat:no-repeat;
width: 980px;
height: 140px;
border-radius: 35px;
}
h1{
padding-left: 50px;
color: #800000;
}
#content {
font-family: Times New Roman;
background-color: white;
width: 747px;
margin-left: 19px;
padding-top: 5px;
}
p{
padding-left: 10px;
padding-right: 10px;
}
#navbar {
background-color: white;
width: 185px;
margin-right: 19px;
padding-left: 5px;
padding-top: 5px;
}
#footer{
clear:both;
text-align:center;
padding:5px;
opacity: 0.5;
}
a{
display: block;
width: 100%;
font-size: 30px;
line-height:50px;
text-align: center;
color:black;
text-decoration: none;
list-style-type: none;
}
a:hover {
color: red;
}
.button {
display: block;
margin-bottom: 5px;
height: 50px;
width: 150px;
background-color:#b3b3b3;
border-radius: 10px;
margin-right: 10px;
}
.title{
font-family: Times New Roman;
font-size: 78;
padding-left: 68px;
height: 140px;
line-height: 140px;
margin-bottom: 5px;
margin-top: 0px;
}
.Rubrik{
padding-left: 50px;
color: black;
font-size: 30px;
font-family: Times New Roman;
}
最佳答案
你的 <body>不再具有 #backgnd 的 ID这已更改为 #backnd无论出于何种原因，这也可能是另一种方式。
更改以下内容:
#backgnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
进入:
#backnd {
background-image:url("../images/gradient-bg.jpg");
background-repeat: repeat-x;
}
它应该像以前一样工作。
希望这对您有所帮助!
关于html - 背景图片消失html/css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33767334/