HTML正方形背景代码,HTML – 背景像素化

这里是纯CSS解决方案,使用repeat-x和适当的定位创建4个这样的线性渐变.

body {

margin: 0;

height: 100vh;

background:

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x;

}

然后多次重复线性渐变.演示：

body {

margin: 0;

height: 100vh;

background:

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 25px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 50px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 75px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 100px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 125px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 150px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 175px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 200px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 225px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 250px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 275px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 300px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 325px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 350px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 375px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 400px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 425px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 450px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 475px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 500px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 525px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 550px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 575px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 600px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 625px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 650px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 675px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 700px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 725px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 750px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 775px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 800px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 825px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 850px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 875px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 900px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 925px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 950px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 975px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1000px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1025px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1050px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1075px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1100px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1125px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1150px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1175px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1200px repeat-x,

linear-gradient(to right, #868686 50%, #3d3d3d 50%) 0 0 / 50px 1225px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #222 50%) 0 0 / 50px 1250px repeat-x,

linear-gradient(to right, #3d3d3d 50%, #868686 50%) 0 0 / 50px 1275px repeat-x,

linear-gradient(to right, #222 50%, #3d3d3d 50%) 0 0 / 50px 1300px repeat-x;

/* and so on */

}

当然,您可以使用任何编程语言或一些CSS预处理器来生成此怪物CSS属性.

但说实话,我会使用SVG来制作8个正方形的东西.演示：

使用SVG进行演示(仅适用于Chrome,您需要使用外部SVG(首选方式)或转义SVG标记)：

body {

background: url('data:image/svg+xml,') 0 0 / 40px 80px repeat;

}

使用转义内联SVG的演示,无处不在,但维护性较差：

body {

background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2040%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2220%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23868686%22/%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23222%22/%3E%3Crect%20x%3D%2210%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%233d3d3d%22/%3E%3C/svg%3E') 0 0 / 40px 80px repeat;

}