如上图UI给出当前页面的所有图标而这些图标是在一张图上,这个时候就需要我们来一个一个用css切出来:
继续:
<style>
.rootview {
background-color: #1213ad;
width: 52px;
height: 52px;
background-image: url("2222.png");
background-repeat: no-repeat;
background-position: -33px -50px;
}
</style>
设置之后的样子
属性介绍:
background-repeat:可以设置的属性 repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2},默认值：repeat
repeat-x：
背景图像在横向上平铺
repeat-y：
背景图像在纵向上平铺
repeat：
背景图像在横向和纵向平铺
no-repeat：
背景图像不平铺
round：
背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：
背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
background-position可以设置的属性[ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ],默认值：0% 0%，效果等同于left top
<percentage>：
用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
<length>：
用长度值指定背景图像填充的位置。可以为负值。
center：
背景图像横向和纵向居中。
left：
背景图像在横向上填充从左边开始。
right：
背景图像在横向上填充从右边开始。
top：
背景图像在纵向上填充从顶部开始。
bottom：
背景图像在纵向上填充从底部开始。
