CSS裁剪图片

lp895876294

浏览: 284782 次
性别:
来自: 济南

最近访客更多访客>>

yuhanwm910731

iringo

cxxasi

xmy20051643

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

其它

当处于正常网络的情况下，不大于200KB的单张图片载入所需的时间相差无几，将多个图片合并之后会减少图片的数量，进而减少了页面请求图片的次数，页面的加载效率相应会有提高。

用到的样式示例：

.letter_A {

background-image: url(markers_new.png);

background-repeat: no-repeat;

background-position: -30px 0px;

height: 500px;

width: 520px;

}

background-position：x,y表示相对于图片左上角的偏移量，如果x>0,y>0，则图片分别向右、向下移动x像素、y像素；如果x<0,y<0，则图片分别向左、向上移动x像素、y像素。

height和width：从background-position位置开始，裁剪图片的高度和宽度。

实例：

待裁剪图片：

代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像裁剪</title>
<style type="text/css">
<!--
.letter_RedA {
	background-image: url(markers_new.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 32px;
	width: 23px;
}
.letter_RedB {
	background-image: url(markers_new.png);
	background-repeat: no-repeat;
	background-position: -29px 0px;
	height: 32px;
	width: 23px;
}
.letter_OrangeA {
	background-image: url(markers_new.png);
	background-repeat: no-repeat;
	background-position: 0px -32px;
	height: 32px;
	width: 23px;
}
.letter_OrangeB {
	background-image: url(markers_new.png);
	background-repeat: no-repeat;
	background-position: -29px -32px;
	height: 32px;
	width: 23px;
}
.letter_assist {
	background-image: url(markers_new.png);
	background-repeat: no-repeat;
	background-position: -151px -134px;
	height: 13px;
	width: 11px;
}
-->
</style>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#00FFFF">
	<tr>
		<td width="20%" align="center" valign="bottom"><div class="letter_RedA"/></td>
		<td width="20%" align="center" valign="bottom"><div class="letter_RedB"/></td>
		<td width="20%" align="center" valign="bottom"><div class="letter_OrangeA"/></td>
		<td width="20%" align="center" valign="bottom"><div class="letter_OrangeB"/></td>
		<td width="20%" align="center" valign="bottom"><div class="letter_assist"/></td>
	</tr>
</table>
</body>
</html>

效果：