CSS的sprite图片处理

多张图片合成一张图片后,使用css样式,

获取图片中指定位置的图片。

mycss.css

body{
	text-align:center;
} 

.one,.two,.three,.four,.five,.six {
	background-color: orange;
	border-radius: 5px;
	background-image: url('G.png');
	background-repeat: no-repeat;
	width: 128px;
	height: 128px;
	margin:0 auto;
	display: inline-block;
}
.one {
	background-position: 0px 0px;
}
.two {
	background-position: -128px 0px;
}
.three {
	background-position: -256px 0px;
}
.four {
	background-position: 0px -128px;
}
.five {
	background-position: -128px -128px;
}
.six {
	background-position: -256px -128px;
}
.seven {
	background-image: url('G.png');
	background-repeat: no-repeat;
	margin: 0 auto;
	height: 256px;
	width: 384px;
}

index.html




	
	


G.png

CSS的sprite图片处理_第1张图片

CSS的sprite图片处理_第2张图片

你可能感兴趣的:(HTML)