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

Question

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

Answer 1

通过使用 linear-gradient 图像和 radial-gradient 图像的组合作为背景，可以使用纯 CSS 创建此图案。线性渐变产生垂直和水平实线，而径向渐变产生中间的虚线。

正如您从输出中看到的那样，它与所提供的图像不完全相同，因为点之间的距离有点宽，而且点的尺寸更大。如果我们减小点的大小，它开始看起来更像 dashes/square 块而不是点。

^{注意：我试图只用一个径向渐变来完成点，但它也使点出现在实线上方（或后面）因此与两个径向渐变有关。}

.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>

下面的代码片段显示了当点之间的 space 减少时图案的显示方式。这些点不能比它们当前的大小小很多，因为如果它们的半径进一步减小，它们就会变得不可见。

.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>

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

Drawing dotted lines and straight lines as background of Div

html

javascript

css

linear-gradients