Question

我有点困惑。如果我在CSS中使用背景图像，我的导航中没有任何图像。如果我使用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/ 我制作了图标，我想在导航中显示它！

Answer 1

更新以下CSS：

.home {
 background:url (http://explorelaromana.com/wpcontent/themes/explorelaromana/images/home_icon.jpg) no-repeat;
 display: inline-block;
 height: 36px;
 width: 43px;
 vertical-align: bottom;
}

希望这一点。：）

Answer 2

还有一些我无法获得的问题，可能是character code，indentation或markup等。

因为当我在jsfiddle中对你的代码进行整理时，它可以正常工作。我不确定为什么会这样。

Demo

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

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

2 个答案:

Demo

Demo 2