.png 作为导航栏上的背景图片

Question

我是 HTML 和 CSS 的新手，这不是一个项目，而是我自己发现的东西。我正在尝试使用列表 (ul、li) 创建一个导航栏，并希望在导航栏上放置一个搜索图标和用户登录图标以及其他文本。这是我的 HTML:

<div class="nav">
    <ul>
        <div class="navBarIcons">
            <li class="searchIco"><a href="">search</a></li>
            <li class="userIco"><a href="">user</a></li>
        </div>
        <li><a href="">OVERCLOCKING</a></li>
        <li><a href="">PERIPHERALS</a></li>
        <li><a href="">STORAGE</a></li>
        <li><a href="">POWER SUPPLY</a></li>
        <li><a href="">GRAPHIC CARDS</a></li>
        <li><a href="">MEMORY</a></li>
        <li><a href="">MOTHERBOARDS</a></li>
        <li><a href="index.html">PROCESSOR</a></li>
    </ul>
</div>

这是我的 CSS:

.userIco {    
    background-image: url(userIco.png);    
    background-repeat: no-repeat;    
    background-size: 25px;    
    background-position: center;    
}

.searchIco {    
    background-image: url(searchIco.png);    
    background-repeat: no-repeat;    
    background-size: 25px;    
    background-position: center;    
}

.nav li a:hover {    
    background-color: #195ca1;         
    color: #f2f2f2;         
}

我想做的是将鼠标悬停在图标上，它仍然会在那里（正如您在屏幕上看到的那样，当我悬停时它会消失）

如果我删除文本，它不会正确对齐，当我悬停时它不会覆盖整个背景块

Answer 1

你的 background-image 被设置到 <li> 元素中，但是你的 background-color 被设置到你的 <a>，所以它比 <li>。您应该将 background-color 设置为 li:hover，或者将 background-image 移至 <a> 元素。图像需要与背景颜色在同一层或更高层。

.png 作为导航栏上的背景图片

.png as background images on navigation bar

html

css

nav

divide