导航中的CSS背景图片（稍后悬停）

debugcn 发表于 Dev

c00L

我有点困惑。如果我在CSS中使用background-image，则导航中没有任何图像。如果使用HTML img标签进行操作，则会得到图像，但是如果使用CSS进行尝试，则不会获得任何图像。:(

我这样尝试过：https : //stackoverflow.com/a/16194594/3701753

但是什么也没发生。我猜我的CSS出问题了？！

这是我的代码：

HTML：

<nav>
    <ol>
        <li class="home"><a href="home.php"></a>
        </li>
        <li><a href="Info.php">Info</a>
        </li>
        <li><a href="projects.php">Projects</a>
        </li>
        <li><a href="contact.php">Contact</a>
        </li>
    </ol>
</nav>

CSS：

/******************************************* 
            Links
*******************************************/
 a:link {
    font-family:'Iceland';
    font-style: normal;
    font-size: 30px;
    font-weight: 700;
    text-decoration: none;
    color: #666;
}
a:visited {
    color: #666;
}
a:hover {
    color: #F90;
}
a:active {
}
/******************************************* 
            Navigation
*******************************************/
 nav {
    width: 100%;
    bottom: 0;
    left:0;
    height: 60px;
    position: fixed;
    background-color: #333;
}
ol {
    list-style: none;
    text-align: center;
    height: 100%;
}
li {
    display: inline;
    margin-right: 40px;
}
li a {
}
/******************************************* 
            Class
*******************************************/
 .home {
    background: url(../pics/home_button.png);
}
/******************************************* 
            ID's
*******************************************/
 #main {
    background-color: #C90;
    width: 90%;
    height: 84%;
    margin: 5% auto;
}

小提琴在这里：http : //jsfiddle.net/373Bc/2/我制作了图标，我想在导航中显示它！

4dgaurav

还有一些其他的问题，对此我无法得到，可能与character code，indentation或markup等。

因为当我在TidyUp中使用jsfiddle编写代码时，它可以工作。我不确定为什么会这样。

演示版

.home {
    background: url(http://explorelaromana.com/wp-content/themes/explorelaromana/images/home_icon.jpg);    
    width: 40px;
    height: 32px;
    line-height: 60px;
}

li {
    display: inline-block;
    margin-right: 40px;
}