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

U对一个div使用相同的高度，他将使用第二个--25px并且先减去第一个。另外你不能有2个背景图像一个div，他只会使用一个。如果您想要多个背景图像，则必须使用css3功能Multiple background images in one div

图像并没有像它应该的那样出现

1 个答案: