CSS设置图片的重复

最新推荐文章于 2024-06-07 18:05:55 发布

量变决定质变

最新推荐文章于 2024-06-07 18:05:55 发布

阅读量8.8k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52156491

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

CSS设置图片的重复

CSS通过设置background-repeat属性来设置图片的重复方式，包括水平重复、竖直重复和不重复等。

图片的竖直方向重复。

<span style="font-size:24px;"><html>
	<head>
		<title>
			背景重复
		</title>
		<style>
			<!--
			body{
			padding:0px;
			margin:0px;
			background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
			background-repeat:repeat-y;
			background-color：#0066FF；
		}		
			-->
		</style>
	</head>
	
	<body>
	</body>
</html></span>

如果将background-repeat属性的值设置为repeat-x，则背景图片将在水平方向上重复显示。

最后，就是将background-repeat的属性设置为no-repeat，即不重复作为单一的图片显示。

<span style="font-size:24px;"><html>
	<head>
		<title>
			背景重复
		</title>
		<style>
			<!--
			body{
			padding:0px;
			margin:0px;
			background-image:url(
http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg);
			background-repeat:no-repeat;
		}		
			-->
		</style>
	</head>
	
	<body>
		<div style="padding-left:10px;padding-to:100px;">小猫</div>
	</body>
</html></span>

显示的效果，图片仅仅显示了一次，并通过div标记的CSS属性，调整了文字的位置，使其位于图片的上面。

量变决定质变

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS设置图片的重复

CSS设置图片的重复 CSS通过设置background-repeat属性来设置图片的重复方式，包括水平重复、竖直重复和不重复等。图片的竖直方向重复。背景重复 <!-- body{ padding:0px; margin:0px; background-image:url(htt
复制链接

扫一扫