知識儲備
1.:nth-child(even) 選擇偶數(shù)項子元素
2.background-origin
規(guī)定 background-position 屬性相對于什么位置來定位
3.background-size 規(guī)定背景圖像的尺寸
4.background-image 為元素設置背景圖像
(請設置一種可用的背景顏色部凑，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果)
小練習
需要的效果：
斑馬紋文字
html
<div>
while(true){<br/>
var d = new Date();<br/>
if(d.getDate()==1 && d.getMonth()==3){<br/>
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;
}
思考
我們?yōu)槭裁床挥茫簄th-child(even)?
因為我們根本無法選中一行转捕，這里如果選擇：nth-child(even)解法的話音比，我們必須增加html結構速勇，用table吧炸渡！
但是我們有更好的解法区匣！
還記得之前第二節(jié)的如何繪制條紋背景一節(jié)么梦皮？我們這里用了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;
讓其背景從內容盒子開始繪制呀忧，解決型将！
斑馬紋效果
