纯 html/css 的虚线背景

Question

我需要像图片中那样用圆点设置元素背景的样式。从网上尝试了很多，但我需要和图片中的一模一样

我不明白所有与线性渐变相关的东西，如“背景混合”、“径向渐变”，但我无法得到我想要的东西。

background:
            linear-gradient( /* background color fading left to right , to blend with every others gradient bg */
                    to left,
                    #fff,
                    #fff),
            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;

    background-blend-mode:
            multiply, /* only blend the first layer to keep dots hidden */
            normal,
            normal,
            normal;

这是我得到的 https://jsbin.com/poyoqajima/edit?html,css,output

Answer 1

.dotted {
height:500px;
width:500px;
  background-image: radial-gradient(#ccc 10%, transparent 10%),
      radial-gradient(#ccc 10%, transparent 10%);
  background-color: #fff;
  background-position: 0 0, 50px 50px;
  background-size: 50px 50px;
}

<div class='dotted'></div>

你可以玩转颜色和尺寸

Answer 2

你可以使用这个模式

body{margin:0;}

<div style="height: 100vh">
  <svg width="100%" height="100%">
    <defs>
        <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse">                         <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle>
        </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect>
</svg>
</div>

您可以更改圆圈的大小和颜色

纯 html/css 的虚线背景

dotted background with pure html/css

html

javascript

css

frontend