谁能告诉我如何同时创建具有线性渐变的点状背景。并且如果可能的话将点分组在小方块中

Question

这是渐变：linear-gradient(to bottom right, #294A77, #8986A5); 和 $dot-color: #606685;

我试过了：https://codetea.com/a-simple-technique-to-create-a-dot-pattern-or-dot-grid-background/但没有成功。

Answer 1

对于圆点，也许 radial-gradient() 更符合您的要求。 background-blend-mode 还可以帮助隐藏一些点，然后将颜色与主渐变从左到右混合以绘制背景。

这是一个您可以从中启发自己的例子：

html {/*for demo  it can be here any block level html tag */
  height: 100%;

             /* your groups of dots */

  background: 
    linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
      to left, 
      #8382a2, 
      #2f4e79),
    repeating-linear-gradient( /* horizontal white lines hidding a row of dots */
      to bottom,
      transparent 0,
      transparent 32px,
      white 32px,
      white 40px,
      transparent 40px
    ),
    repeating-linear-gradient( /* vertical lines hidding a col of dots */
      to right,
      transparent 0,
      transparent 32px,
      white 32px,
      white 40px,
      transparent 40px
    ),
    radial-gradient( /* dot repeated via background-size */
        circle at 5px 5px,
        #2f4e79 1px,
        transparent 2px,
        transparent 8px
      )
      0 0 / 8px 8px /*position + /  background-size here */;
      
  background-blend-mode: 
      multiply, /* only blend the first layer to keep dots hidden */
      normal, 
      normal, 
      normal;
               /* end dot group */
}

尺码和颜色由您自行更新。

要玩的 Codepen：https://codepen.io/gc-nomade/pen/Yzwowpg

另请参阅：

谁能告诉我如何同时创建具有线性渐变的点状背景。并且如果可能的话将点分组在小方块中

Can someone show me how to create dotted background with linear gradient at same time. And also if possible to group dots in small squares

css

gradient

sass

background-image