如何使用HTML/CSS为DIV元素添加小正方形网格背景

你需要的网格背景可以通过CSS渐变直接实现，无需额外新增DOM元素，也不会影响上层的图形绘制逻辑，修改对应样式即可，以下是完整可运行的代码：

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <v-stage ref="stage" class="stage">
          <v-layer ref="layer"> </v-layer>
        </v-stage>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

<style scoped>
  .stage {
    background-color: #f9f9f9;
    /* 绘制水平和垂直的网格线 */
    background-image: 
      linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    /* 控制单个网格的尺寸为20px*20px */
    background-size: 20px 20px;
    width: 100%;
    /* 可根据需求调整画布高度 */
    height: 600px;
  }
</style>

参数调整说明：

• 若需要调整网格大小，修改background-size的数值即可，数值越大单个网格的尺寸越大
• 若需要调整网格线的颜色/透明度，修改linear-gradient中的rgba参数即可
• 若需要调整网格的底色，修改background-color的取值即可

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