现代 CSS

CSS秘密花园： 斑马条纹背景的文本行

作者：大漠 日期：2016-03-27 点击：2115
CSS秘密花园

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

CSS Secrets

几年前，我们第一次接触伪元素:nth-child()/:nth-of-type()的时候，最常见的用例之一就是“斑马条纹”的表格。

斑马条纹背景的文本行

这在以前需要服务器端的代码，客户端的脚本，或繁琐的手工代码，现在它已经只需要简单的这几行代码就可以实现了：

tr:nth-child(even) {
    background: rgba(0,0,0,.2);
}

斑马条纹行的表格在UI设计（如上面展示的Mac OS X Yosemite文件列表）和印刷设计中非常常见，因为斑马条纹可以帮助我们的视线更容易地跟随一长行移动。

但是，对于为文本行应用相同的效果，而不是表格中的一行的时候，我们就变得无能为力了。这对于提高代码片段的可读性非常有用。很多作者最后都会用JavaScript来包装<div>中的每一行，这样它们可以和:nth-child()技术一样，在语法高亮中使用这种方法。这不仅是它减少了理论简洁的原因（JS不应该用于样式），还因为很多DOM元素会拖慢页面的加载，所以这是一个非常脆弱的解决方案（当你增加文字大小，还有某个换行时会怎样呢？）。还有更好的方法吗？

很多作者甚至给css工作小组发了请求，申请一个:nth-line()伪类，但是因为性能原因被否决了。

解决方案

除了伪元素应用一个较暗的背景颜色来代表行，我们以另一个角度来思考问题。为什么不可以为整个元素应用一个带斑马条纹的背景图像呢？这刚开始听起来可能比较可怕，但是我们可以直接在CSS中生成背景，通过CSS渐变并让它们以em为单位，这样它们可以自动适应font-size的变化。

让我们延伸一下这个想法，写出下图中的斑马条纹的代码。

斑马条纹背景的文本行

首先，我们需要创建横条纹，根据《CSS秘密花园：条纹背景》方案。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;

效果如图所示

斑马条纹背景的文本行

结果和我们想要的是非常相近的。我们可以尝试改变字体大小，还有条纹收缩或扩张成我们需要的大小！但是，有一个很严重的问题：线条没有对齐，和我们的目的不符。这是为什么？

如果你仔细看看上图，你会发现第一个条纹是从我们容器的顶部开始的，正如我们希望从背景图像中得到的一样。但是，我们的代码不会从那里开始，因为这样看起来会非常丑。所以正如你看到的，我们应用了一个.5em的内边距，这使得它和我们的条纹偏移了。

解决这个问题的一种方法是使用background-position来让条纹相对于底部移动.5em。但是，如果我们决定后边调整内边距，我们还需要调整背景位置，这并不是非常DRY。我们可以让背景自动适应padding的长度吗？

我们回忆一下background-origin。这正是我们需要的：一个告诉浏览器使用内容框边缘作为基准来解决background-position的方法，而不是默认的填充框边缘。让我们把它添加到前边的代码中：

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

如图所示

斑马条纹背景的文本行

这正是我们想要完成的斑马条纹效果的代码！因为我们在条纹中使用了半透明背景的颜色，我们可以调整背景颜色，斑马条纹仍然可以工作。基本上，这是非常灵活的，破坏它的唯一途径是改变line-height的值，而没有相应改变background-size的值。

这是假设我们正在处理代码片段。在一般情况下，如果有内联元素需要一个更大的行高的时候，它也可以被打破，比如有较大fontsize的图片或内联内容。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css-secrets/zebra-strlped-text-lines.htmlnike air max 2019 black

返回顶部