如何实现菱形背景图45度偏移重复，形成对角线排列图案？

当前使用background: url("/images/bg.png") repeat;时，菱形背景图会直接上下左右相邻排列，要实现对角线交错的效果，可以采用多层背景叠加+偏移定位的简洁方案，具体操作如下：

• 先确认菱形图片的实际尺寸，比如假设图片为100px×100px的正方形（内部菱形占满画布）
• 使用两层相同的背景图，通过background-position让第二层背景相对于第一层偏移半个图片的宽高，即可形成交错的对角线排列

示例代码：

.target-element {
  /* 替换成你的菱形图片路径 */
  background-image: url("/images/bg.png"), url("/images/bg.png");
  background-repeat: repeat;
  /* 偏移值为图片宽高的一半，根据实际尺寸调整 */
  background-position: 0 0, 50px 50px;
  /* 设置背景图尺寸为图片实际大小 */
  background-size: 100px 100px;
}

如果你的菱形图片不是正方形，只需将background-position的偏移值改为图片宽、高的一半即可，比如图片宽80px、高80px，就把偏移值设为40px 40px。

效果对比 #

当前效果：

期望效果：

内容的提问来源于stack exchange，提问作者Pixy