no-repeat案例

最新推荐文章于 2022-03-01 07:41:13 发布

原创最新推荐文章于 2022-03-01 07:41:13 发布 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了CSS背景图片`no-repeat`属性的使用，详细解释了`-x`、`x`、`-y`和`y`参数的含义，它们分别控制图片在水平和垂直方向上的重复方式。通过实例展示了如何使图片规则地显示在网站上。

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

理解

no-repeat x xp y xp -x表示上方移动x个xp， x表示下方移动x个xp， -y表示左方移动x个xp， -y表示右方移动x个xp，

1一张图片有许多图像，图像都规则的显出

2.网站先出来如图所示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式2</title>
		
		<style type="text/css">
			
			li{
				list-style: none;
				float: left;
				width: 70px;
				height: 32px;
				line-height: 32px;
				font-size: 12px;
			}
			.btn{
				width: 42px;
			
				background: url(img/icon.png) no-repeat -39px 2px;
				text-align: center;
			}
			
			.pic{
				width: 25px;
				background: url(img/icon.png) no-repeat 0 3px;
			}
			.pic2{
				width: 25px;
				background: url(img/icon.png) no-repeat 0 -47px;
			}
			.pic3{
				width: 25px;
				background: url(img/icon.png) no-repeat 0 -105px;
			}
			.pic4{
				width: 25px;
				background: url(img/icon.png) no-repeat 0 -153px;
			}
		</style>
	</head>
	<body>		
        <ul>
        	<li class="pic"></li>
        	<li>购物车</li>
        	<li class="pic2"></li>
        	<li>帮助中心</li>
        	<li class="pic3"></li>
        	<li>加入收藏</li>
        	<li class="pic4"></li>
        	<li>设为首页</li>
        	<li class="btn">登录</li>
        	<li style="width: 5px;"></li>
        	<li class="btn">注册</li>
        </ul>
	</body>
</html>