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

Question

我正在使用 repeating-radial-gradient 来创建点状背景效果。但是，我需要在不知道背景颜色是什么的情况下将顶部和底部边缘淡化为 0 的不透明度。有什么方法可以使用在 IE 11+ 中工作的 CSS 来做到这一点？

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;
}

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

需要转这个:

进入这个:

我可以使用图像 mask ，但 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

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

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%;
}

<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>