css(层叠样式)-小技巧

1 小星星的重叠：
结构

span1{
      width:60px;//修改了图片的宽度(图片本身宽度为12px)
      height:12px:
      background:url(文件路径);//图片一定要平铺
      display:inline-block;//让当前元素装换为行内快元素
}
span2{
       width:12px;//图片的本身大小
      height:12px:
      background:url(文件路径) no-repeat;
      display:inline-block;//让当前元素装换为行内快元素
}

效果

result.png

2 修改星星的总体大小()
结构

span1{
      width:90px;//之前的60扩大1.5倍
      height:18px:
      background:url(文件路径);//图片一定要平铺
      display:inline-block;//让当前元素装换为行内快元素
      background-size:18px 18px;//把之前的背景图放大了1.5倍
}
span2{
       width:45px;//图片的本身大小
      height:18px:
      background:url(文件路径) no-repeat;
      display:inline-block;//让当前元素装换为行内快元素
      background-size:18px 18px;//同上
}

效果

result.png