CSS裁剪图片

最新推荐文章于 2024-07-05 09:52:23 发布

liupengtx

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量765

点赞数 1

分类专栏：其它

本文链接：https://blog.csdn.net/liupengtx/article/details/84599093

版权

其它专栏收录该内容

48 篇文章 0 订阅

订阅专栏

当处于正常网络的情况下，不大于 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>

效果：