css3 文本行的斑马线

背景知识

CSS 渐变， background-size ，“条纹背景”，“灵活的背景定位

难题

几年前，在刚刚获得 :nth-child() / :nth-of-type() 伪类之后，我们最常用其来解决的一个需求就是表格的“斑马条纹”（见下图）。这在以前需要服务器端预先处理、客户端的脚本处理或者是纯手工写死来实现，而
现在只需下面这几行简单的代码就足够了：

tr:nth-child(even) {

background: rgba(0,0,0,.2);

}

尽管如此，当我们想把表格行的这种效果应用到文本行时，仍然有些力不从心。这种效果对于提高代码段的可读性来说尤为实用。很多开发者最终不得不使用 JavaScript 来把每行代码包裹进一个个 <div> 元素中，然后

运用上述 :nth-child() 技巧来实现斑马条纹——幸好大多数语法着色脚本都可以顺带消化掉这个令人头皮发麻的过程。这种方式并不理想，它不仅在理论上有违纯粹原则（JavaScript 不应该掺和到样式层面来），而且过多的
DOM 元素还会拖累整个页面的性能；此外，它其实不太健壮。（当你增大字号导致其中的某一“行”发生折行时会怎么样？）我们还有更好的办法吗？

解决方案

　　抛开以前那种给每一行套元素再加背景的做法，我们换一种思路来重新考虑这个问题。为什么不对整个元素设置统一的背景图像，一次性加上所有的斑马条纹呢？乍听起来这好像是个糟糕的点子，但别忘了，我们可以在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适应 font-size 的变化了。

　　让我们用这个方法给下图中的这段代码加上斑马条纹。首先，我们需要运用“条纹背景”一节中所描述的方，创建出水平条纹背景。它的background-size 需要设置为 line-height 的两倍，因为每个背景贴片需要覆盖两行代码。我们最初尝试写出的代码可能是这样的：

<pre><code>while (true) {

	var d = new Date();

	if (d.getDate()==1 &&

	    d.getMonth()==3) {

		alert("TROLOLOL");

	}

}</code></pre>

pre {

    padding: 0 .5em;

    line-height: 1.2;

    background: hsl(20, 50%, 95%);

    background-image: linear-gradient(

                      rgba(120,0,0,.1) 50%, transparent 0);

    background-size: auto 2.4em;

    background-origin: content-box;

    font-family: Consolas, Monaco, monospace;

}

code { font: inherit }

最终效果：

其中background-origin 这个属性正是我们所需要的：它可以告诉浏览器在解析 background-position时以 content box 的外沿作为基准，而不是默认的 padding box 外沿。因为我们是用半透明色来生成条纹的，所以在改变背景色时，斑马条纹仍然可以正常显示。这个方法总体来说是十分灵活的，唯一可能破坏效果的情况可能就是在改变 line-height 时忘了相应地调整 background-size 。