Javascript 不透明度滚动背景的视图框的羽化边缘

我目前在我的网站的一个小区域有一个滚动背景，我试图让图像在进入视图框的侧面时淡出。因此，当图像进入查看区域时，它会变得不透明，然后在进入中心时变得完全不透明，然后在碰到视图框的另一个边缘时再次淡出。我尝试过应用不透明度的渐变，但没有成功，还尝试过在查看区域上放置一个不透明度的框，这样当图像滚动到该区域时，它会改变不透明度，但这两种方法都不起作用

我使用一个图像作为背景，但将其添加到滚动条中两次，这样它就可以循环，看起来好像永远不会结束一样

有什么办法吗

对于滚动背景，我使用jquery平滑div滚动插件

编辑：下面是我试过的一些代码

我的原始滚动元素。。。不言自明

<div id='cloud-viewer'>
  <div class='scrollWrapper'> //view box
    <div id='cloud-wrapper' class='scrollableArea'> //scrolling in here
      <div id='clouds-1' class='clouds'></div>
      <div id='clouds-2' class='clouds'></div>
    </div>
  </div>
</div>

//视图框
//在这里滚动

我试着在代码中添加一个不透明的元素，如下所示

<div id='cloud-viewer'>
  <div id='opaque'></div> //this had css to keep it in pos and opacity
  <div class='scrollWrapper'>
    <div id='opaque'></div> //this gets scrolled...
    <div id='cloud-wrapper' class='scrollableArea'>
      <div id='clouds-1' class='clouds'></div>
      <div id='clouds-2' class='clouds'></div>
    </div>
  </div>
</div>

//这有css来保持它的位置和不透明度
//这会被滚动。。。

我会制作两张透明的PNG图像，从网站背景颜色渐变为透明。第一个将用于左侧（bg颜色到透明），第二个将是第一个（透明到bg颜色）的水平翻转版本。只需绝对地将这两个图像放置在可滚动区域的左/右上方，并允许图像在其后面滑动。如果您的可视区域是固定大小的，您也可以使用一个大图像来执行此操作。有道理吗

---

例如，如果你看这个网站（不是我的）：它就是我认为你要找的。这是他们正在使用的叠加图像：。

我将制作两个透明的PNG图像，从网站背景色渐变为透明。第一个将用于左侧（bg颜色到透明），第二个将是第一个（透明到bg颜色）的水平翻转版本。只需绝对地将这两个图像放置在可滚动区域的左/右上方，并允许图像在其后面滑动。如果您的可视区域是固定大小的，您也可以使用一个大图像来执行此操作。有道理吗

---

例如，如果你看这个网站（不是我的）：它就是我认为你要找的。这是他们正在使用的覆盖图：。

你已经尝试过的东西有什么不起作用？发布你的代码。好吧，不起作用的是没有对图像应用不透明度。我将在问题中发布代码。您必须发布非工作代码，以便我们看到问题所在。添加了一些代码。我还尝试对每个边界元素应用不透明度渐变，但不幸的是，这只应用于背景，而不是盒子内部的元素。您已经尝试过的东西有什么不起作用？发布你的代码。好吧，不起作用的是没有对图像应用不透明度。我将在问题中发布代码。您必须发布非工作代码，以便我们看到问题所在。添加了一些代码。我还尝试将不透明度渐变应用于每个边界元素，但不幸的是，这只应用于背景，而不是框内的元素