关于css展示图片的一部分花了两个钟这个问题

• 记录一下自己的低效笨拙的代码经历：
  利用css展示五角星的一部分
  like this :
  
  就这个样式，几行代码而已，由于之前写过一遍，但是没有保存，所以第二次写的时候没有想着怎么样实现功能，只是一个劲的去回忆昨天怎么实现的，然而根据回忆却一直无法复现，开始焦虑和不可思议。然后又反复尝试，告诉自己重新思考这个问题，甚至参考已有的代码，但仍然无法实现，我仿佛陷入了一个诅咒中，怎么都逃不出来，于是我开始怀疑自己的智商，就这个简单的问题竟然卡了两三个小时，最后新建一个index.html在最原始的文档里尝试，很快就实现了，我寻思应该是在公司的项目文件中使用的是行内样式比较繁琐和不清晰，不方便在浏览器中调试样式吧，以后要吸取教训！
• 代码如下

//实现思路：父：固定宽度和margin，子：利用图片做背景，且背景尺寸为cover,设置容器的高度为父高度
.father{
     width: 15.1px;
       height: 15.1px;
       list-style: none;
       margin-right: 4px;
}
 .child{
      width: 7px;
      height: 15.1px;
      background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01tzXrgS1mGcBNj0oIJ_!!6000000004927-2-tps-32-32.png);
      background-size: cover;
  }
  
<div class="father">
	<div class="child"></div>
</div>

• 扩展

the difference bettwen background-size:100% and background-size:cover

1. cover:
   撑满长宽中长的一边，短的一边裁掉多余的，如：

2. 100%:
   宽度小于高度的时候，图片撑开宽度全部显示
   

   宽度大于高度的时候，与cover相同
   如：撑满长宽中长的一边，短的一边裁掉多余的