javascript - 绘制虚线和直线作为Div的背景

有没有办法用JavaScript或CSS在div的背景中绘制水平线和虚线，而不使用重复的图像？基本上是为了实现下面的图像？

最佳答案

使用linear-gradient图像和radial-gradient图像作为背景，可以使用纯CSS创建此模式。线性梯度产生固体垂直和水平线，而径向梯度在中间产生虚线。
从输出中可以看到，它与所提供的图像不完全一样，因为点之间的距离有点宽，点的大小也更大。如果我们减小点的大小，它看起来更像虚线/正方形块，而不是点。
注：我试着只用一个径向梯度来完成这些点，但它也使这些点出现在实线的上方（或后方），因此不得不用两个径向梯度来完成。

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 12px 60px, 12px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

下面的代码片段显示了当点之间的空间减小时，图案是如何显示的。这些圆点不能比它们当前的尺寸小得多，因为如果它们的半径进一步减小，它们就会变得不可见。

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px), radial-gradient(1px 1px at center, #AAA 1px, transparent 2px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

下面的片段显示了当我们减小点的大小时会发生什么。这似乎更接近你的原始图像，因为他们看起来更像破折号比点，但我不确定，因为你的标题说其他。

.div-with-pattern {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(to bottom, #AAA 1px, transparent 1px), linear-gradient(to right, #AAA 1px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px), radial-gradient(1px 1px at center, #AAA .5px, transparent 1px);
  background-size: 40px 60px, 120px 40px, 6px 60px, 6px 60px;
  background-position: 0px 0px, 0px 0px, 0px -10px, 0px 10px;
}
body {
  margin: 0;
  padding: 0;
}

<!-- prefix free library is only to avoid browser prefixes, it is optional -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="div-with-pattern"></div>

关于javascript - 绘制虚线和直线作为Div的背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34888571/