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

需要转这个：

进入这个：

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

试试这个代码

淡化上边缘

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

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

淡化顶部和底部边缘

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

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

Answer 2

仅使用 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>

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

Fade out edges of repeating radial gradient in CSS

css

radial-gradients