表格中的斑马条纹
表格中的斑马条纹很容易实现
你可以使用nth-child
来实现:
tr:nth-child(even){
background: #E9E9E9;
}
也可以使用nth-of-type
来实现:
tr:nth-of-type(even){
background: #E9E9E9;
}
文本中的斑马条纹
那么我们如何实现一段文本行中的斑马条纹效果呢?
我们想到的第一种方法可能是:将文字分为四行,奇偶行显示背景,显然这种方法是不可行的,我们无法控制文本的长度。
好吧,那来我们万全的,直接放一张背景图片上去,但是如果我们调整了文字的大小呢,虽然可以实现,但是这个方法可能不是很理想。
那么行吧,具体该咋做呢?我们还是放背景图片,但是用渐变来实现,这样基本就没啥问题了,font-size
和background-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;
}