我可以使用噪声纹理创建从黑色到透明的 scss 渐变吗？

Question

我在如何创建噪声渐变上找到了这个旧线程，但它没有正确淡入透明，从而产生硬边框效果。我想知道是否有可能只有梯度有噪声，而不是最终的透明度。预先感谢。

这是我迄今为止尝试过的：

.black-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    stop-color: black;
    background-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%),
            url('/noise.svg');
    z-index: -1;  
}

<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'>
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='5' 
      numOctaves='3' 
      stitchTiles='stitch'/>
  </filter>
  
  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg>

这是我所说的边框效果：

Answer 1

我没有100%得到要求，但是是这样的吗？ SVG 有一个带有滤镜和遮罩的矩形。蒙版创建渐变。因此，噪声滤波器在矩形的透明部分中不可见。我没有得到的部分是黑色。渐变应该覆盖黑色吗？

.black-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICA8ZmlsdGVyIGlkPSJub2lzZUZpbHRlciI+CiAgICA8ZmVUdXJidWxlbmNlIAogICAgICB0eXBlPSJmcmFjdGFsTm9pc2UiCiAgICAgIGJhc2VGcmVxdWVuY3k9Ii40IiAKICAgICAgbnVtT2N0YXZlcz0iLjQiIAogICAgICBzdGl0Y2hUaWxlcz0ic3RpdGNoIiAvPgogIDwvZmlsdGVyPgogIDxsaW5lYXJHcmFkaWVudCBpZD0ibGcwMSIgZ3JhZGllbnRUcmFuc2Zvcm09InJvdGF0ZSg5MCkiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1vcGFjaXR5PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1vcGFjaXR5PSIwIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxtYXNrIGlkPSJtMDEiPgogICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNsZzAxKSIvPgogIDwvbWFzaz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgbWFzaz0idXJsKCNtMDEpIiBmaWx0ZXI9InVybCgjbm9pc2VGaWx0ZXIpIi8+Cjwvc3ZnPg==');
  z-index: -1;
}

<div class="black-bar"></div>

<p>The SVG used as background image:</p>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
  <filter id="noiseFilter">
    <feTurbulence 
      type="fractalNoise"
      baseFrequency=".4" 
      numOctaves=".4" 
      stitchTiles="stitch" />
  </filter>
  <linearGradient id="lg01" gradientTransform="rotate(90)">
    <stop offset="0%" stop-opacity="1" stop-color="white" />
    <stop offset="100%" stop-opacity="0" stop-color="white" />
  </linearGradient>
  <mask id="m01">
    <rect width="100%" height="100%" fill="url(#lg01)"/>
  </mask>
  </defs>
  <rect width="100%" height="100%" mask="url(#m01)" filter="url(#noiseFilter)"/>
</svg>