淡出CSS中重复径向渐变的边缘

Question

我使用repeating-radial-gradient创建虚线背景效果。但是，我需要将顶部和底部边缘淡化为0的不透明度，而不知道背景颜色是什么。有没有办法用IE 11中的CSS工作？

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.dots {
  width: 100%;
  height: 100%;
  background-image: repeating-radial-gradient(circle, #02fcb8 0px, #02fcb8 1px, transparent 2px, transparent 100%);
  background-size: 18px 18px;
}

＆＃13;

<div class="dots"></div>

＆＃13;

＆＃13;

＆＃13;

需要转此：

进入这个：

我可以使用图像蒙版，但在IE / Edge中没有支持：

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 1)), color-stop(1, rgba(0, 0, 0, 0)));

Answer 1

试用此代码

淡化上边缘

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.dots {
  width: 100%;
  height: 100%;
  background-image: repeating-radial-gradient(circle, #02fcb8 0px, #02fcb8 1px, transparent 2px, transparent 100%);
  background-size: 18px 18px;
  position:relative;
}
.dots:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #FFFFFF 0%, transparent 100%);
}

＆＃13;

<div class="dots"></div>

＆＃13;

＆＃13;

＆＃13;

淡化顶部和底部边缘

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.dots {
  width: 100%;
  height: 100%;
  background-image: repeating-radial-gradient(circle, #02fcb8 0px, #02fcb8 1px, transparent 2px, transparent 100%);
  background-size: 18px 18px;
}
.dots:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #FFFFFF 0%, transparent 50%, #FFFFFF 100%);
}

＆＃13;

<div class="dots"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用CSS似乎不可能;但是，我找到了一种方法，使用linearGradient元素中的mask和SVG模式在SVG中执行此操作：

＆＃13;

＆＃13;

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
.dots {
  width: 100%;
  height: 100%;
}
.dots svg {
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="dots">
  <svg xmlns='http://www.w3.org/2000/svg'>
    <defs>
      <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
       <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop stop-color="black" stop-opacity="0" offset="0"/>
        <stop stop-color="white" offset="0.5"/>
        <stop stop-color="black" stop-opacity="0" offset="1"/>
       </linearGradient>
       <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
      </mask>
      <pattern id="dots" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
        <circle cx="10" cy="10" r="1" style="stroke: none; fill: #02fcb8" />
      </pattern>
    </defs>
    <rect x="1" y="1" width="100%" height="100%" style="fill: url(#dots); mask: url(#mask)" />
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;