CSS中的斑马条纹

表格中的斑马条纹

表格中的斑马条纹很容易实现
你可以使用nth-child来实现：

tr:nth-child(even){
    background: #E9E9E9;
}

也可以使用nth-of-type来实现：

tr:nth-of-type(even){
    background: #E9E9E9;
}

文本中的斑马条纹

那么我们如何实现一段文本行中的斑马条纹效果呢？

我们想到的第一种方法可能是：将文字分为四行，奇偶行显示背景，显然这种方法是不可行的，我们无法控制文本的长度。
好吧，那来我们万全的，直接放一张背景图片上去，但是如果我们调整了文字的大小呢，虽然可以实现，但是这个方法可能不是很理想。
那么行吧，具体该咋做呢？我们还是放背景图片，但是用渐变来实现，这样基本就没啥问题了，font-size和background-size一起调整，下面直接上代码：

<p>我是一段很长的文字，分为很多行显示，为了追求视觉上的效果，要求背景为斑马条纹，但是该怎么实现这个效果呢？p>

p{
    font-size: 16px;
    line-height: 24px;
    background-color: antiquewhite;
    padding: 10px;
    background-image: linear-gradient(#e9e9e9 50%,transparent 0);
    background-size: auto 48px;
    background-origin: content-box;
}