纯html/css的虚线背景[重复]答案

【问题标题】：dotted background with pure html/css [duplicate]纯html/css的虚线背景[重复]
【发布时间】：2022-01-26 00:56:39
【问题描述】：

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

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

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

【问题讨论】：

尝试在jsbin这样的沙盒上为我们提供最新的工作代码
jsbin.com/poyoqajima/edit?html,css,output 这是代码

标签： javascript html css frontend

【解决方案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;
}

&lt;div class='dotted'&gt;&lt;/div&gt;

你可以玩弄颜色和大小

【讨论】：

【解决方案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>

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

【讨论】：