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

Question

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

Answer 1

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

正如您从输出中看到的那样，它与提供的图像不完全相同，因为点彼此相距较远，点的大小较大。如果我们减小点大小，它开始看起来更像破折号/方块而不是点。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

下面的代码段显示了减少点大小时会发生什么。这个似乎比原始图像更接近，因为它们看起来更像是破折号而不是点，但我不确定，因为你的标题不是这样。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;