HTML/CSS导航菜单-圆角菜单的制作

最新推荐文章于 2025-06-07 15:07:01 发布

01-01

最新推荐文章于 2025-06-07 15:07:01 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML/Css/Javascript学习文章标签：入门 HTML CSS 导航体验

本文链接：https://blog.youkuaiyun.com/qq_35354855/article/details/78012986

HTML/Css/Javascript学习专栏收录该内容

16 篇文章

订阅专栏

本文探讨了CSS中使用background-position属性进行图片定位时遇到的问题，特别是当使用复合值时图片显示不全的情况，并对比了使用background-position-y的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding:0px;
				margin:0px;
				font-size: 14px;
			}
			ul{
				height: 31px;
				
				padding-top: 60px;
				list-style: none;
				border-bottom: 5px solid #F60;
			}
			li{
				
			}
			a{
				padding-top: 2px;
				padding-bottom: 0px;
				text-decoration: none;
				text-align: center;
				display: inherit;
				
				width: 120px;
				height: 29px;
				line-height: 30px;
				background-image: url(img/圆角背景.png);
				color: blue;
				float: left;
				
				
			}
			.on,a:hover{
				
				color: #0000FF;
				background-position-y: -31px;
			}
			
		</style>
		
		
	</head>
	<body>
		<ul>
			<li><a class="on" href="#">首页</a></li>
			<li><a href="#">导航</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
		</ul>
	</body>
</html>

此处使用HBuilder编译。

其中
.on,a:hover{

color: #0000FF;
background-position-y: -31px;
}

这一段中，background-position:0,-31px;这样用的话那么图片就显示不完全，无法把字下面铺垫完全，但是如果background-position-y: -31px;这样用的话就没什么问题了，若有大佬可以告诉我这是什么原因，感激不尽。