以条纹虚线作为背景

如何解决以条纹虚线作为背景

是否可以仅使用 CSS 获得这种条纹和虚线背景？

背景是 Chrome 在检查 flex 元素时创建的，我觉得它真的很酷。

解决方法

您可以像这样使用 repeating-linear-gradient：

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100w;
  background: repeating-linear-gradient(
    45deg,tomato 0px,tomato 2px,transparent 2px,transparent 9px
  );
}
div {
  height: 100vh;
  width: 100vw;
  background: repeating-linear-gradient(
    -45deg,white 0px,white 4px,transparent 4px,transparent 12px
  );
}

<div></div>

Tweak with the code

这几行确实产生了一些相似的图案，但在低 DPI 屏幕上看起来不太好。因此，在我看来，最好使用 SVG 模式而不是纯 CSS。

,

你可以使用repeating-linear-gradient，但我不能让它变成虚线：

//Example
body,html {
  background: repeating-linear-gradient(
      -55deg,#606dbc,#606dbc 5px,#465298 5px,#465298 10px
   );
}

,

这是我的问题的 SVG 解决方案。 CSS 看起来不太好。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    
  <!-- Let's define the pattern -->
  <!-- The width and height should be double the size of a single checker -->
  <pattern id="pattern-checkers" x="0" y="0" width="100%" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
    <!-- Two instances of the same checker,only positioned apart on the `x` and `y` axis -->
    <!-- We will define the `fill` in the CSS for flexible use -->
  <line x1="0" y1="7" x2="100%" y2="7" stroke="#F3817F"
          stroke-dasharray="8 4" />
  </pattern>
  
  <!-- Define the shape that will contain our pattern as the fill -->
  <rect x="0%" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>
  
</svg>

,

我建议使用图案来创造美妙的背景：http://projects.verou.me/css3patterns/