Page 151 - css揭秘

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

解决方案

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

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

padding: .5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(
rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;

如图 5-10 所示，这个结果跟我们的预期已经相当接近了。我们甚至可
以试着改变字号，条纹也会跟着放大或缩小！不过，有一个严肃的小问题不
可忽视：代码行和条纹是错位的，破坏了整体效果。这是怎么回事？

如果近距离地观察图 5-10，你可能就会发现，第一条条纹是从容器
的最顶部开始的，这是背景图像最平常的表现。不过，我们的代码并不是
从那里开始的，因为那样排版会显得很局促。如你所见，我们对容器应用
图 5-10 了 .5em 的内边距，这个距离正是这些条纹与理想位置之间的偏差。
我们在尝试给代码段加上斑马条
纹时走出的第一步 有一个办法可以解决这个问题，那就是用 background-position 把向
条纹向底部移动 .5em。不过，如果我们以后决定调整内边距，还需要相应
地修改背景定位值，这显然不够 DRY。可以让背景自动跟着内边距的宽度
走吗？

让我们回顾一下“灵活的背景定位”中提到的 background-origin。这
个属性正是我们所需要的：它可以告诉浏览器在解析 background-position
时以 content box 的外沿作为基准，而不是默认的 padding box 外沿。现在把

120 第 5 章 字体排印

඀ࠡ JOEC