【文本】斑马线条纹背景

斑马线背景效果

实现这种效果，你可以给每一行套元素，然后再添加背景。
不过还有更便捷的另一种方法：给整个元素设置统一的背景图像，然后一次性加上所有的斑马条纹。

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揭秘》