vue+css网格背景图制作

环境

• win10
• vscode
• vue2.x

代码

• 改变网格与网格之间的间距：同时调整transparent和background-size，数值越小，网格之间的间距越小；
• rgba后的数值用于调整网格线的粗细程度

<template>
  <div class="app">
    <div class="GridBackground"></div>
  </div>
</template>
<script>
export default {
  name: "app",
};
</script>
<style scoped>
.app {
  width: 1191.9936px;
  height: 237.0048px;
  /* opacity: 0.1; */
  border-radius: 32.0064px;
  background: #2f5fff;
}
.GridBackground {
  height: inherit;
  background: -webkit-linear-gradient(
      top,
      transparent 0.3373rem,
      rgba(255, 255, 255, 0.1) 0.3494rem
    ),
    -webkit-linear-gradient(left, transparent 0.3373rem, rgba(
            255,
            255,
            255,
            0.1
          )
          0.3494rem);
  background-size: 0.3494rem 0.3494rem;
}
</style>