html - 图像未按应有的方式显示

Question

因为我的工作，我必须学习 html 和 CSS。所以它发生得很快，我遇到了一个我找不到解决方案的问题。

这个CSS：

#footer{
    height: 207px;
    margin-top: 7px;
    background: url(img/footer.jpg);
    background-repeat: no-repeat;
}
#footer.menue{
    height: 25px;
    background-image: url(img/menue.jpg);
    background-repeat: no-repeat;

应该将两张图片带到网站上，但只显示第一张。

HTML

        <div id="footer">
            <ul class="menue">
                <li><a href="#Links">Links</a></li>
                <li><a href="#Kontakt">Kontakt</a></li>
                <li><a href="#Impressum">Impressum</a></li>
            </ul>
        </div>

[已解决：] http://jsbin.com/utupat/1/edit

Answer 1

如果您使用的是 html 代码：

<div id="footer" class="menue"></div>

和CSS作为

#footer{
    height: 207px;
    margin-top: 7px;
    background: url(img/footer.jpg);
    background-repeat: no-repeat;
}
#footer.menue{
    height: 25px;
    background-image: url(img/menue.jpg);
    background-repeat: no-repeat; }

你对一个 div 使用相同的高度，他将使用第二个 - 25px 并忽略第一个。你也不能有 2 个背景图像一个 div，他只会使用一个。如果你想要多个背景图片，你必须使用 css3 功能多个背景图片在一个 div