CSS中的斑马条纹

表格中的斑马条纹

表格中的斑马条纹很容易实现
你可以使用nth-child来实现:

tr:nth-child(even){
    background: #E9E9E9;
}

也可以使用nth-of-type来实现:

tr:nth-of-type(even){
    background: #E9E9E9;
}

CSS中的斑马条纹_第1张图片

文本中的斑马条纹

那么我们如何实现一段文本行中的斑马条纹效果呢?
CSS中的斑马条纹_第2张图片
我们想到的第一种方法可能是:将文字分为四行,奇偶行显示背景,显然这种方法是不可行的,我们无法控制文本的长度。
好吧,那来我们万全的,直接放一张背景图片上去,但是如果我们调整了文字的大小呢,虽然可以实现,但是这个方法可能不是很理想。
那么行吧,具体该咋做呢?我们还是放背景图片,但是用渐变来实现,这样基本就没啥问题了,font-sizebackground-size一起调整,下面直接上代码:

<p>我是一段很长的文字,分为很多行显示,为了追求视觉上的效果,要求背景为斑马条纹,但是该怎么实现这个效果呢?p>
p{
    font-size: 16px;
    line-height: 24px;
    background-color: antiquewhite;
    padding: 10px;
    background-image: linear-gradient(#e9e9e9 50%,transparent 0);
    background-size: auto 48px;
    background-origin: content-box;
}

你可能感兴趣的:(css,页面重构技巧)