Question

我是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;

}

Answer 1

由于某种原因，您的<body> ID不再#backgnd已更改为#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 / css

1 个答案: