5-2 文字编排 -- 斑马纹文字

知识储备

1.:nth-child(even) 选择偶数项子元素

2.background-origin
规定 background-position 属性相对于什么位置来定位

3.background-size 规定背景图像的尺寸

4.background-image 为元素设置背景图像
(请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果)

小练习

需要的效果：

斑马纹文字

html

<div>    
  while(true){<br/>  
  &nbsp;&nbsp;var d = new Date();<br/>    
  if(d.getDate()==1 && d.getMonth()==3){<br/> 
  &nbsp;&nbsp;alert('TROLOLOL')<br/>
</div>

css

div{   
 
  background: beige; 
  background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0); 

  background-size: auto 3em; 
  line-height: 1.5em;
  background-origin: content-box;
}

思考
我们为什么不用：nth-child(even)?
因为我们根本无法选中一行，这里如果选择：nth-child(even)解法的话，我们必须增加html结构，用table吧！

但是我们有更好的解法！
还记得之前第二节的如何绘制条纹背景一节么？我们这里用了liner-gradient

1.首先我们给一个背景色

background: beige;

2.我们来制造条纹，大小暂且设置为1.5em吧
（如果我们设置其字体为1em,那么剩下的0.5em做空隙会好看很多）

background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;

俩个条纹高度 = 1.5em2 = 3em*

我们来看看效果吧！

未完成的斑马纹

好像很接近了！

3.我们再将内容行高为1.5em,此时文字会自动垂直居中

即将完成的斑马纹

4.我们希望给文字加点内距

padding:.5em

咦？！我们的效果又挂了。
这里我们设置

background-origin: content-box;

让其背景从内容盒子开始绘制，解决！

斑马纹效果