CSS秘密花园： 斑马条纹背景的文本行_html/css_WEB-ITnose
几年前，我们第一次接触伪元素 :nth-child() / :nth-of-type() 的时候，最常见的用例之一就是“斑马条纹”的表格。
这在以前需要服务器端的代码，客户端的脚本，或繁琐的手工代码，现在它已经只需要简单的这几行代码就可以实现了：
tr:nth-child(even) { background: rgba(0,0,0,.2);} 斑马条纹行的表格在UI设计（如上面展示的Mac OS X Yosemite文件列表）和印刷设计中非常常见，因为斑马条纹可以帮助我们的视线更容易地跟随一长行移动。
但是，对于为文本行应用相同的效果，而不是表格中的一行的时候，我们就变得无能为力了。这对于提高代码片段的可读性非常有用。很多作者最后都会用JavaScript来包装
很多作者甚至给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 的图片或内联内容。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频