以条纹虚线为背景

Question

是否可以仅使用 CSS 来实现条纹和虚线背景？

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

Answer 1

您可以使用重复线性渐变，但我无法将其设为虚线：

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

Answer 2

您可以这样使用 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.

Answer 3

这是我的问题的 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>

Answer 4

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

以条纹虚线为背景

Having Striped Dashed lines as background

css

linear-gradients