斑馬線背景效果
實(shí)現(xiàn)這種效果，你可以給每一行套元素朵诫，然后再添加背景。
不過還有更便捷的另一種方法：給整個(gè)元素設(shè)置統(tǒng)一的背景圖像薄扁，然后一次性加上所有的斑馬條紋剪返。
padding: .5em;
line-height:1.5;
backgroud: #F8E2EB; /*粉色背景*/
background-image:linear-gradient(
rgba(255,255,255,.9) 50%, transparent 0); /*白色漸變*/
background-size:auto 3em; /*文字行高的兩倍*/
代碼行和文本行是錯(cuò)位的
原因是什么呢？
- 白色的條紋是從容器的最頂部開始的邓梅，這時(shí)背景圖像最平常的表現(xiàn)脱盲。
- 文本卻不是從那里開始的，因?yàn)槲覀儗?duì)容器設(shè)置了 .5em 的內(nèi)邊距日缨。這個(gè)距離正是這些條紋與理想位置之間的偏差钱反。
怎么解決呢？
- 利用 background-position 把條紋向底部移動(dòng) .5em 殿遂。不過诈铛，以后內(nèi)邊距需要調(diào)整的話，背景位置也需要相應(yīng)的調(diào)整墨礁。
- 利用 background-origin 以content-box 的外沿作為基準(zhǔn)幢竹，而不是padding-box 外沿。
padding: .5em;
line-height:1.5;
backgroud: #F8E2EB; /*粉色背景*/
background-image:linear-gradient(
rgba(255,255,255,.9) 50%, transparent 0); /*白色漸變*/
background-size:auto 3em;
background-origin:content-box;
這樣恩静，就可以達(dá)到我們想要的效果了焕毫。
而且，背景色是用半透明來生成條紋的驶乾，所以在改變背景色的情況下邑飒，任然可以正常顯示。
*在改變 line-height 時(shí)级乐，background-size 也需要相應(yīng)的調(diào)整疙咸。
參考書籍：Lea Verou《CSS揭秘》
