no-repeat案例

最新推荐文章于 2021-07-02 15:22:11 发布

weixin_44793200

最新推荐文章于 2021-07-02 15:22:11 发布

阅读量3.5k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44793200/article/details/89556905

版权

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

摘要由CSDN通过智能技术生成

理解

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;
			}

最低0.47元/天解锁文章

weixin_44793200

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
no-repeat案例

理解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"&g...
复制链接

扫一扫