html怎么选取部分图片,CSS 从大图中选取部分区域作为目标图标的代码详解

1、图片素材

图片素材如下(大小：137px * 264px)，图中从上到下，连续存放了两张100px * 100px的图

2、HTML代码

html代码如下：

.icon {

width:100px; /*--设置背景图显示区域宽度--*/

height:100px;/*--设置背景图显示区域高度--*/

border:1px solid red;

background-image:url(icons.png); /*--设置背景图像--*/

/*--no-repeat 不允许图像在任何方向上平铺,repeat-y,repeat-x分别允许图片在y，x方向上平铺--*/

background-repeat:no-repeat;

}

图片上半部分

图片下半部分

显示效果：

修改代码如下：

.icon {

width:100px; /*--设置背景图显示区域宽度--*/

height:100px;/*--设置背景图显示区域高度--*/

border:1px solid red;

background-image:url(icons.png); /*--设置背景图像--*/<