CSS zebra background

Copyright: https://blog.csdn.net/qq_24884131/article/details/88226032

Today the record about --CSS zebra background to achieve
CSS zebra background to realize there are two different implementations (there are many ways we quickly shared with me) 1, backgroundliner-gradient ; 2, disposed pseudo-class nth-of-type（even）/nth-child(even)Background color. Depending on the use different methods stripe shape

Shaped vertical cross-like

these two shapes can be two ways, but according to different traffic using different methods:
1, each row stripe, the need for content presentation, the following
① table, each line independent of each other, row by has been displayed; CSS pseudo-class time using simple and convenient method of
② a multi-line display, as shown below, this time using the background: liner-gradient is achieved, and needs to be noted that the background-size needs to be line-height2 times

You can see the contents close to the bottom of the zebra, unsightly how we solve the problem? Do not tell you, their own research, after all, not a science blog, how much your thinking is always good. Reminder and background settings.

2, diagonal stripes

without a doubt, this is definitely the background to do, do it the div into an oblique. . Reference Code:

background: linear-gradient(
        45deg,
        #cc95c0 25%,
        #dbd4b4 0,
        #dbd4b4 50%,
        #cc95c0 0,
        #cc95c0 75%,
        #dbd4b4 0
  );

Using the repeat-liner-gradient effect is better