Question

<div id="nav_banner">
<br>
<a class="smoothScroll" href="#home">Home</a>
<a class="smoothScroll" href="#contactme">Email</a>
<br>
<div id="nav_banner2">
<a class="smoothScroll" href="https://twitter.com" target="_blank" title="Twitter">Twitter</a>
<a class="smoothScroll" href="https://facebook.com" target="_blank" title="fb">facebook</a>
</div>
</div>

我正在尝试在html页面的nav_bannner部分中添加背景图片..

这是我的css代码：

#nav_banner
{

    width:100%;
    position:fixed;
    bottom:0px;
    background:white;
    left:0px;
    right:0px;
    height:100px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    font-size:30px;
    word-spacing: 50px;
    text-align: center;
    font-family: Copperplate,Copperplate Gothic Light,fantasy; 
    background-image:url('images/shsf.png');

}

但是当我加载页面时...图像没有显示......导航横幅只有白色背景。

有谁能告诉我上面的代码有什么问题？

Answer 1

首先，检查路径。该代码适用于Chromium (Version 39.0.2171.65 Ubuntu 14.04)。

其次，如果您的图片较小，可以通过 data-uri https://css-tricks.com/data-uris/

将其直接嵌入到css中

将图像添加到css中的div部分

1 个答案: