web-css基础知识-background-image-background-repeat-background-position

F737D3E1-B1D2-44CB-8C96-ABB6B990022B.png

如上图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>

设置之后的样子

EE9FED9A-F09B-4DC0-B23C-24C13EB0CEF3.png

属性介绍:
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：
背景图像在纵向上填充从底部开始。