06 - 复杂的背景图案

使用 CSS 实现复杂的背景图案效果

网格

linear-gradient & background-size

background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,transparent 0),
                  linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

方格纹

linear-gradient & background-size

波点

linear-gradient & background-size

棋盘

linear-gradient & background-size

background:#eee;
background-image:
    linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
    linear-gradient(45deg, rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0,15px 15px;
background-size:30px 30px;

repeating-conic-gradient & background-size

background:#eee;
background: repeating-conic-gradient(#bbb 0,#bbb 25%,#eee 0,#eee 50%);
background-size:30px 30px;