斑马线背景效果
实现这种效果，你可以给每一行套元素，然后再添加背景。
不过还有更便捷的另一种方法：给整个元素设置统一的背景图像，然后一次性加上所有的斑马条纹。
padding: .5em;
line-height:1.5;
backgroud: #F8E2EB; /*粉色背景*/
background-image:linear-gradient(
rgba(255,255,255,.9) 50%, transparent 0); /*白色渐变*/
background-size:auto 3em; /*文字行高的两倍*/
代码行和文本行是错位的
原因是什么呢？
- 白色的条纹是从容器的最顶部开始的，这时背景图像最平常的表现。
- 文本却不是从那里开始的，因为我们对容器设置了 .5em 的内边距。这个距离正是这些条纹与理想位置之间的偏差。
怎么解决呢？
- 利用 background-position 把条纹向底部移动 .5em 。不过，以后内边距需要调整的话，背景位置也需要相应的调整。
- 利用 background-origin 以content-box 的外沿作为基准，而不是padding-box 外沿。
padding: .5em;
line-height:1.5;
backgroud: #F8E2EB; /*粉色背景*/
background-image:linear-gradient(
rgba(255,255,255,.9) 50%, transparent 0); /*白色渐变*/
background-size:auto 3em;
background-origin:content-box;
这样，就可以达到我们想要的效果了。
而且，背景色是用半透明来生成条纹的，所以在改变背景色的情况下，任然可以正常显示。
*在改变 line-height 时，background-size 也需要相应的调整。
参考书籍：Lea Verou《CSS揭秘》
