CSS中的line-height行高属性的使用技巧小结

    rgba(white, 0.6) calc(100% – 44px),   
    rgba(white, 0.4) calc(100% – 44px),   
    rgba(white, 0.4) calc(100% – 22px),   
    rgba(white, 0.2) calc(100% – 22px),   
    rgba(white, 0.2));   
  background-position: bottombottom center;   
}  

还有其他方法也可以做到这样的效果，比如覆盖伪元素梯度（用pointer-events: none;所以它并不恼人）。

文字之间的行线

使用一个和我们上面使用的相类似的solid-color-stops的技术，我们可以建立一个1px的线在已知的line-height上重复。最简单的方法是使用repeating-linear-gradient()来确保其他元素可以正常使用（比如说padding也是基于line-height的）。

CSS Code复制内容到剪贴板

.parent {   
  padding: $lh*2;   
  background: #082838;   
  background-image: repeating-linear-gradient(   
    to bottombottom,   
    rgba(white, 0)   0,   
    rgba(white, 0)   $lh/1em*16px-1,   
    rgba(white, 0.1) $lh/1em*16px-1,   
    rgba(white, 0.1) $lh/1em*16px  
  );   
}  

为了得到用1px的线，我们需要知道line-height的像素值是多少，然后用这个值在减去1px。我们的目标是正好在line-height的高度上进行梯度的重复，来让这个空间的最后一个像素是一条线。因为我们已经不是body字体大小的1em,而是16px了。而且line-height的设置用的是em的单位。所以我们可以通过1em划分要删除的单元，然后复制成16px并在需要的时候减1.

每一行图片的位置

如果你知道精确地line-height，你还可以做的另一家事情是用background-size在纵轴上去匹配它。然后你把他垂直重复，他将会在每一行有一个图片的队列。

CSS Code复制内容到剪贴板

.text   
  background-image: url(image.svg);   
  background-size: $lh $lh;   
  background-repeat: repeat-y;   
  padding-left: $lh*2;   
}