好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css怎么设置图片平铺方式

在css中,可 利用 background-re PE at属性设置图片平铺方式,当值为“repeat”时可完全平铺背景,为“repeat-x”时可横向平铺,为“repeat-y”时可纵向平铺,为“no-repeat”时不平铺(图像将仅显示一次)。

本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

在css中,可利用background-repeat属性设置图片平铺方式。

background-repeat 属性定义了图像的平铺模式,设置 是否 及如何重复背景图像。

background-repeat属性可以设置 四种 平铺模式:

1、值为“repeat”时可完全平铺背景

repeat :默认。背景图像将在垂直 方向 和水 平方 向重复。

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 500px;
				h ei ght: 500px;
				border: 2px solid  red ;
				background -i mage: url( img /nz.png);
				background-repeat:repeat;
			}
		</style>
	</head>
	<body>
		<div ></div>
	</body>
</html>

2、值为“repeat-x”时可横向平铺

repeat-x : 只有水平位置会重复背景图像

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-x;
}

3、值为“repeat-y”时可纵向平铺

repeat-y :只有垂直位置会重复背景图像

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-y;
}

4、值为“no-repeat”时则不平铺

no-repeat:背景图像将仅显示一次

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:no-repeat;
}

(学习视频分享:css视频教程)

以上就是css怎么设置图片平铺方式的详细内容,更多请关注其它相关 文章 !

总结

以上是 为你收集整理的 css怎么设置图片平铺方式 全部内容,希望文章能够帮你解决 css怎么设置图片平铺方式 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于css怎么设置图片平铺方式的详细内容...

  阅读:20次