css导航栏添加图片大小

今天我们来学一下如何在CSS导航栏中添加图片，并且控制图片的大小。 首先，我们需要在HTML中添加一个导航栏的代码：

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Blog</a></li>
	</ul>
</nav>

然后，在CSS中，我们可以为导航栏中的每个li元素添加一个背景图片：

nav ul li {
	background-image: url("images/icon.png");
	background-repeat: no-repeat;
	background-position: 10px center;
}

在这个代码中，我们在背景图片的路径下找到一个叫做"icon.png"图片作为背景图片。我们还设置了图片不重复（background-repeat: no-repeat）并且让图片在li元素中水平居中显示（background-position: 10px center）。 但是，你可能会发现这个背景图片有点大，占据了整个导航栏的空间。为了控制图片的大小，我们可以使用background-size属性：

nav ul li {
	background-image: url("images/icon.png");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 20px 20px;
}

在这个代码中，我们使用了background-size属性，将图片大小设置为20px的宽度和20px的高度。这样，图片就会按照我们希望的大小显示在导航栏中。 通过这样的操作，我们就可以在CSS导航栏中添加图片，并且控制图片的大小了。希望这篇文章能够帮助你更好地理解CSS导航栏。