.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>元素。图像需要在与背景颜色相同或更高的图层上。