纯CSS实现文本行间不同颜色的斑马条纹

 2016-10-05 13:42

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

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

尽管如此,当我们想把表格行中的这种效果应用到文本行时,然后有些力不从心。这种效果对于提高代码的可读性来说尤为实用。很多开发者最终不能不使用JavaScript来把每行代码包裹进一个个<div>,元素中,然后运用上述:nth-child()技巧来实现斑马条纹。但这种方式并不理想,它不仅在理论上有违纯粹原则,而且过多的DOM元素还会拖累整个页面的性能,它其实不健壮。

抛开以前那种给每一行元素加背景的做法,我们换一种思路来重新考虑这个问题。为什么不对整个元素设置统一的背景图像,一次性加上所有的斑马条纹呢?这时,我们想起了渐变背景图案,因为我们可以用em单位来设置背景尺寸,这样背景就可以自动适用font-size的变化了。

首先,我们需要创建出水平条纹背景。它的background-size需要设置为line-height的两倍。因为每个背景贴片需要覆盖两行代码。我们最初代码可能如下:

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

可以看到,这个结果和我们预期的已经相当接近了。我们甚至可以改变字体大小,条纹也会跟着放大或缩小!不过,有一个严肃的小问题不可忽略,代码行和条纹是错位的,破坏了整体效果。这是什么情况?

第一条条纹是从容器的最顶部开始的,这是背景图像最平常的表现。不过,我们的代码并不是从那里开始的,因为那样排版很仓促。如你所见,我们对容器用了0.5em的边距。如果我们已经决定改变背景定位值,给背景加上写死的内边距值显然不合理,我们可以让背景自动跟着内边距的宽度来走。

在“灵活的背景定位”中,我们提到background-origin。这个属性正是我们所需要的:它可以告诉浏览器正在解析background-position时以content box的外沿作为基准,而不是默认的padding box外沿。现在把这个也加入其中吧:

padding:.5em;
line-height: 1.5;
background: beige;
background-image: linear-gradient(#B2DFDB 50%,#DCEDC8 0);
background-size: auto 3em;
background-origin:content-box;
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: