如何使用 HTML/CSS 向 DIV 元素添加小方形网格答案

【问题标题】：How to add small square shaped grid to DIV element using the HTML/CSS如何使用 HTML/CSS 向 DIV 元素添加小方形网格
【发布时间】：2021-12-18 19:01:24
【问题描述】：

我的应用程序中有一个div 元素。我想为它添加背景。背景应该由小方块组成。因为我想在它上面画一些形状。我无法了解究竟需要做什么才能在后台获取这些网格。有人可以帮忙吗？

我希望HTML page 中的整个div 部分看起来像这样：

应该是这样的：

<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: red;
  }
</style>

【问题讨论】：

因为您提到要在此网格上绘制，我建议使用<canvas> 元素，然后在 JS 中您可以在画布上绘制背景网格。以stackoverflow.com/questions/53310138/… 为例。
您可以制作一个图像并将其设置为背景图像。你试过了吗？
你想要这个：codepen.io/t_afif/pen/RwVOYZY ?
除非您需要它具有响应性或动态性，或者您需要它以某种方式交互或可供用户访问，否则这似乎是一个小的重复背景图像的好案例...
@TemaniAfif 请将此作为答案提供，以便我将其标记为答案。我用了你的方法，效果很好。

标签： html css twitter-bootstrap vue.js bootstrap-4

【解决方案1】：

背景可以做到：

html {
  min-height: 100%;
  background-image: 
    conic-gradient(at calc(100% - 2px) calc(100% - 2px),#366 270deg, #0000 0),
    conic-gradient(at calc(100% - 1px) calc(100% - 1px),#a9a9a9 270deg, #0000 0);
  background-size: 100px 100px, 20px 20px; /* adjust the size like you want */
}

【讨论】：

【解决方案2】：

我正在为我的KonvaJS Stage 实现此功能，以下是完整的代码示例，以防将来有人需要它：

<style scoped>
.root {
  --bg-color: #fff;
  --line-color-1: #D5D8DC;
  --line-color-2: #a9a9a9;
}

.body {
  height: 100vh;
  margin: 0;
}

.stage {
  height: 100%;
  background-color: var(--bg-color);
  background-image:
    conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0),
    conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0);
  background-size: 100px 100px, 20px 20px;
}
</style>

<div class="root" style="width:100%; height:100%">
    <div class="body">
      <div class="stage"></div>
    </div>
</div>

【讨论】：