利用background-image里的liner-gradient屬性可以實(shí)現(xiàn)一些簡單的css網(wǎng)格背景,能自適應(yīng)背景备燃,挺實(shí)用的讹躯,下面就簡單的介紹兩款網(wǎng)格背景
1.桌布花紋
代碼塊
height:300px;
width:300px;
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;
2.藍(lán)圖網(wǎng)格
代碼塊
height: 300px;
width: 300px;
background:#58a;
background-image: linear-gradient(white 2px,transparent 0),
linear-gradient(90deg, white 2px,transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size:75px 75px,75px 75px,15px 15px,15px 15px;