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

【问题标题】：CSS background-image in navigation (later hover)导航中的 CSS 背景图像（稍后悬停）
【发布时间】：2023-03-22 12:58:01
【问题描述】：

我有点困惑。如果我在 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/ 我制作了图标，我想在导航中显示它！

【问题讨论】：

在您的小提琴中，您忘记在导航中写“家”。在您引用图像的链接上也找不到图像。你能检查一下吗？
没有“主页”，因为我想在那里有一个图标。我现在从一个随机网站上拿了一个图标。
@c00L 你需要在.home a里面使用image标签或者需要为a标签定义一个高度和宽度，否则它不会得到高度，并且没有元素高度就没有背景空间图像变得可见。
我像 Gaurav 和 Rishabh Shah 方法一样做到了，图标（图像）出现了，但没有显示链接。我应该在 a 标签中做 .home 类，还是不可能？这是工作！！ ty :P

标签： css html image navigation hover

【解决方案1】：

还有一些我无法解决的其他问题，可能与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;
}

Demo 2

【讨论】：

嗯..奇怪！但该图标并未以原尺寸显示。
我已经制作并编辑了相同的宽度和高度。
好的，您的代码可以正常工作了！比我用 Rishabh Shah CSS 以全尺寸显示它。

【解决方案2】：

更新以下 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;
}

希望这有帮助。 :)

【讨论】：

谢谢！！您的 anwser 与 Gaurav 和 Maulik Anand 相结合，对我有很大帮助！