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

【问题标题】：Drawing dotted lines and straight lines as background of Div绘制虚线和直线作为Div的背景
【发布时间】：2016-01-19 22:59:51
【问题描述】：

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

【问题讨论】：

base64 编码的图像算作图像吗？ :P
使用一张（大得离谱的）背景图片怎么样？我怀疑您想避免 all 使用图像，但您需要澄清一下。例如，CSS 渐变或部分透明元素后面的元素网格呢？
我想更大的问题是你为什么不想使用重复图像？
网格大小是否受到任何限制？
这是一个开始：jsfiddle.net/2kmUg/466

标签： javascript html css linear-gradients

【解决方案1】：

可以通过结合使用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>

下面的 sn-p 显示了当点之间的间距减小时图案是如何出现的。这些点不能比它们当前的大小小很多，因为如果它们的半径进一步减小，它们就会变得不可见。

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

下面的 sn-p 显示了当我们减小点的大小时会发生什么。这似乎更接近您的原始图像，因为它们在我看来更像是破折号而不是点，但我不确定，因为您的标题另有说明。

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

【讨论】：

@Harry 我只需要方形背景。聪明的解决方案，谢谢！